Verwendung von Variablen

Übersicht

Variable Komponenten in gt-next 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 variable Komponenten?

Variable Komponenten werden verwendet, um dynamische Inhalte wie Benutzernamen, Zahlenwerte, Daten und Währungen einzubetten.

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

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

Jede variable Komponente verhält sich unterschiedlich:

• <Var>: Gibt beliebige Inhalte dynamisch aus, wie z. B. Benutzernamen oder Kennungen.
• <Num>: Formatiert Zahlenwerte entsprechend den sprachspezifischen Regeln.
• <Currency>: Formatiert Währungswerte mit Symbolen und Lokalisierungsregeln.
• <DateTime>: Formatiert Datums- und Zeitangaben nach sprachspezifischen Konventionen.

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

Die Komponenten <Num>, <Currency> und <DateTime> verwenden die JS i18n API, um die Inhalte entsprechend der Spracheinstellung des Nutzers 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 entsprechend 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 alle Formatierungen 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 entsprechend dem Gebietsschema formatiert werden sollten
  • Bestellmengen, Alter, Entfernung, etc.
• <Currency>: Private Währungswerte, die entsprechend dem Gebietsschema formatiert werden sollten
  • Transaktionsbeträge, Kontostände, etc.
• <DateTime>: Private Datums- und Zeitwerte, die entsprechend dem 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-next';

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

Variablenkomponenten isolieren außerdem Daten, sodass sie verwendet werden können, um dynamische Inhalte darzustellen, die nicht Teil einer Übersetzung sind.

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

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

Im obigen Beispiel macht der ternäre Operator isAdmin die Dashboard Komponente dynamisch.

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

<Num>

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

import { T, Num } from 'gt-next';
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 Kind einer <T> Komponente oder als eigenständige Komponente verwendet werden.

import { T, Currency } from 'gt-next';
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 Kind einer <T> Komponente oder als eigenständige Komponente verwendet werden.

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

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 das currency-Prop übergeben, um den Währungstyp anzugeben. Dadurch wird sichergestellt, dass das richtige Währungssymbol und die korrekte Formatierung beim Anzeigen des Werts verwendet werden.

Auch andere Komponenten wie <Num> und <DateTime> verfügen über optionale Props, mit denen Sie die Formatierung ebenfalls 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 General Translation 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

• Entdecken Sie bedingte Logik in Branching Components.
• Erfahren Sie mehr über Formatierungsoptionen für bestimmte Variablenkomponenten im API-Referenz:
  • <Num>
  • <Currency>
  • <DateTime>
  • <Var>