Verwendung von Variablen

Übersicht

Variable Komponenten in gt-react ermöglichen es Ihnen, dynamische Inhalte in Übersetzungen einzufügen. Diese Komponenten umfassen:

• <Var>: Zum Anzeigen von Variablen.
• <Num>: Zum Formatieren von Zahlen.
• <Currency>: Zum Formatieren von Währungswerten.
• <DateTime>: Zum Formatieren von Datums- und Zeitangaben.

In diesem Leitfaden behandeln wir:

Was sind Variablenkomponenten?

Variablenkomponenten werden verwendet, um dynamische Inhalte wie Benutzernamen, numerische Werte, Datumsangaben und Währungen zu umschließen.

Diese Komponenten ermöglichen es Ihnen, dynamische Werte so zu formatieren und darzustellen, dass sie mit der Sprache und Region Ihres Benutzers übereinstimmen, ohne dass externe Übersetzungen erforderlich sind.

Verwenden Sie Variablenkomponenten zusammen mit der <T>-Komponente, um sicherzustellen, dass dynamische Inhalte genau und konsistent angezeigt werden.

Jede Variablenkomponente hat ein unterschiedliches Verhalten:

• <Var>: Rendert jeden Inhalt dynamisch, wie Benutzernamen oder Kennungen.
• <Num>: Formatiert numerische Werte gemäß den regionsspezifischen Regeln.
• <Currency>: Formatiert Währungswerte mit Symbolen und Lokalisierungsregeln.
• <DateTime>: Formatiert Datums- und Zeitangaben unter Verwendung regionsspezifischer Konventionen.

Während JSX-Inhalte und Zeichenketten über die General Translation API übersetzt werden, werden Variablenkomponenten vollständig lokal verarbeitet.

Die Komponenten <Num>, <Currency> und <DateTime> verwenden die JS i18n API, um den Inhalt entsprechend der Sprache und Region des Benutzers zu formatieren.

Wie man Variablen-Komponenten verwendet

Grundlegende Verwendung

Die Verwendung ist für alle Variablen-Komponenten gleich.

const user = {
  name: 'John',
  age: 30,
  balance: 1000,
  birthday: new Date('1990-01-01'),
}
<div>
  <Var>{user.name}</Var>
  <Num>{user.age}</Num>
  <Currency>{user.balance}</Currency>
  <DateTime>{user.birthday}</DateTime>
</div>

Umhüllen Sie einfach die Variablen-Komponente um den Inhalt, den Sie anzeigen möchten.

Verwendung von Variablen-Komponenten in <T>

Für sich allein bewirken Variablen-Komponenten nicht viel, da sie Kenntnisse über das Gebietsschema des Benutzers benötigen, um den Inhalt zu formatieren.

Daher sollten Sie Variablen-Komponenten mit <T>-Komponenten verwenden.

Die <T>-Komponente übernimmt nicht nur die Übersetzung des umgebenden Inhalts, sondern übergibt auch das korrekte Gebietsschema an ihre untergeordneten Variablen-Komponenten.

<T>
  Die aktuelle Zeit ist <DateTime>{time}</DateTime>.
</T>

Variablen-Lokalisierung

Die <Num>-, <Currency>- und <DateTime>-Komponenten enthalten integrierte Lokalisierungsunterstützung. Diese Komponenten formatieren ihren Inhalt automatisch basierend auf dem ausgewählten Gebietsschema Ihres Benutzers oder basierend auf zusätzlichen Optionen, die als Props übergeben werden.

Zum Beispiel:

• <Num> zeigt Zahlen mit lokalisierten Dezimaltrennzeichen an.
• <Currency> zeigt Werte mit lokalisierten Währungssymbolen und Positionierung an.
• <DateTime> zeigt Daten und Zeiten gemäß gebietsschemaspezifischen Regeln an.

Sie können auch das Standard-Gebietsschema und die Formatierungsoptionen überschreiben, indem Sie Props direkt an diese Komponenten übergeben.

Datenschutz

Variablen-Komponenten handhaben die gesamte Formatierung lokal; daher werden keine ihrer untergeordneten Elemente an die General Translation APIs zur Übersetzung gesendet (wenn sie mit <T>-Komponenten verwendet werden). Dies ist perfekt, um sensible Daten wie Benutzernamen oder Kontonummern privat und sicher zu halten.

Jede Variablen-Komponente handhabt die Formatierung unterschiedlich und sollte für spezifische Inhaltstypen verwendet werden:

• <Var>: Alles Private, das keine Formatierung erfordert
  • Benutzernamen, Kontonummern, etc.
• <Num>: Private numerische Werte, die gemäß Gebietsschema formatiert werden sollten
  • Bestellmengen, Alter, Entfernung, etc.
• <Currency>: Private Währungswerte, die gemäß Gebietsschema formatiert werden sollten
  • Transaktionsbeträge, Kontostände, etc.
• <DateTime>: Private Datums- und Zeitwerte, die gemäß Gebietsschema formatiert werden sollten
  • Kontoerstellungsdaten, Bestellzeitstempel, etc.

<T>
  <Var>
    <T>Hello, world!</T>
    Goodbye, World!
  </Var>
</T>

Beispiele

<Var>

Da die <Var>-Komponente keine Formatierung vornimmt, sollte sie immer in Verbindung mit einer <T>-Komponente verwendet werden.

import { T, Var } from 'gt-react';

export default function UserGreeting({ user }) {
  return (
    <T>
      Hello, <Var>{user.name}</Var>!
      Your address is <Var>{user.addr}</Var>
    </T>
  );
}

Variablenkomponenten isolieren auch Daten, sodass sie verwendet werden können, um dynamische Inhalte zu rendern, die nicht Teil einer Übersetzung sind.

import { T, Var } from 'gt-react';

export default function Dashboard({ isAdmin }) {
  return (
    <T>
      Your Dashboard:
      <Var>{isAdmin ? <AdminDashboard /> : <UserDashboard />}</Var>
    </T>
  );
}

Im obigen Beispiel macht der isAdmin Ternäroperator die Dashboard-Komponente dynamisch.

Ohne die <Var>-Komponente wäre dies eine ungültige Verwendung der <T>-Komponente.

<Num>

Die <Num>-Komponente kann als untergeordnetes Element einer <T>-Komponente oder als eigenständige Komponente verwendet werden.

import { T, Num } from 'gt-react';
import { Badge } from '@components/custom/cart/Badge';

export default function OrderSummary() {
  const quantity = 10;
  return (
    <>
      <T>
        You have <Num>{quantity}</Num> items in your cart.
      </T>
      <Badge>
        <Num>{quantity}</Num> // This is the same as using quantity.toLocaleString()
      </Badge>
    </>
  );
}

<Currency>

Die <Currency>-Komponente kann als untergeordnetes Element einer <T>-Komponente oder als eigenständige Komponente verwendet werden.

import { T, Currency } from 'gt-react';
import { Badge } from '@components/custom/cart/Badge';

export default function OrderSummary() {
  const total = 1000;
  return (
    <>
      <T>
        Your total is <Currency currency={"USD"}>{total}</Currency>.
      </T>
      <Badge>
        <Currency currency={"USD"}>{total}</Currency> // This will be formatted as $1,000
      </Badge>
    </>
  );
}

<DateTime>

Die <DateTime>-Komponente kann als untergeordnetes Element einer <T>-Komponente oder als eigenständige Komponente verwendet werden.

import { T, DateTime } from 'gt-react';

export default function OrderSummary() {
  const date = new Date();
  return (
    <T>
      Your order was placed on <DateTime>{date}</DateTime>.
    </T>
    <DateTime>{date}</DateTime> // This is the same as using date.toLocaleDateString() or date.toLocaleTimeString()
  );
}

Häufige Fallstricke

Lokalisierungsoptionen ignorieren

Für <Currency> stellen Sie sicher, dass Sie die currency-Eigenschaft übergeben, um den Währungstyp anzugeben. Dadurch wird sichergestellt, dass das richtige Währungssymbol und die korrekte Formatierung beim Anzeigen des Wertes verwendet werden.

Auch andere Komponenten wie <Num> und <DateTime> verfügen über optionale Eigenschaften, mit denen Sie die Formatierung anpassen können.

Hinweise

• Variable Komponenten isolieren Daten, sodass sie verwendet werden können, um dynamische Inhalte darzustellen, die nicht Teil einer Übersetzung sind.
• Variable Komponenten senden keine Daten an die allgemeinen Übersetzungs-APIs, daher sind sie ideal, um sensible Daten privat und sicher zu halten.
• Variable Komponenten können entweder als Kind eines <T> Komponentes oder als eigenständige Komponente verwendet werden.

Nächste Schritte

• Erkunden Sie bedingte Logik in Verzweigungskomponenten.
• Erfahren Sie mehr über Formatierungsoptionen für spezifische Variablenkomponenten in der API-Referenz:
  • <Num>
  • <Currency>
  • <DateTime>
  • <Var>