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 variable Komponenten verwendet

Grundlegende Verwendung

Die Verwendung für alle variablen Komponenten ist 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>

Wickeln Sie einfach die variable Komponente um den Inhalt, den Sie anzeigen möchten.

Verwendung von Variablenkomponenten in <T>

Für sich genommen machen variable Komponenten nicht viel, da sie Informationen über die Spracheinstellung des Nutzers benötigen, um den Inhalt zu formatieren.

Daher sollten Sie variable Komponenten zusammen mit <T>-Komponenten verwenden.

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

<T>
  The current time is <DateTime>{time}</DateTime>.
</T>

Variable Lokalisierung

Die Komponenten <Num>, <Currency> und <DateTime> verfügen über integrierte Lokalisierungsunterstützung. Diese Komponenten formatieren ihren Inhalt automatisch basierend auf der gewählten Spracheinstellung des Nutzers oder 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 -positionen an.
• <DateTime> zeigt Daten und Uhrzeiten gemäß den lokalen Regeln an.

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

Datenschutz

Variable Komponenten führen alle Formatierungen lokal aus; daher werden keine ihrer untergeordneten Elemente an die General Translation APIs zur Übersetzung gesendet (wenn sie mit <T>-Komponenten verwendet werden). Das ist ideal, um sensible Daten wie Benutzernamen oder Kontonummern privat und sicher zu halten.

Jede variable Komponente behandelt die Formatierung unterschiedlich und sollte für bestimmte Inhaltstypen verwendet werden:

• <Var>: Alles Private, das keine Formatierung benötigt
  • Benutzernamen, Kontonummern usw.
• <Num>: Private Zahlenwerte, die entsprechend der Spracheinstellung formatiert werden sollen
  • Bestellmengen, Alter, Entfernung usw.
• <Currency>: Private Währungswerte, die entsprechend der Spracheinstellung formatiert werden sollen
  • Transaktionsbeträge, Kontostände usw.
• <DateTime>: Private Datums- und Zeitwerte, die entsprechend der Spracheinstellung formatiert werden sollen
  • Kontoerstellungsdaten, Bestellzeitstempel usw.

<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>