Variable Components
So verwenden Sie Variable Components für dynamische Inhalte in Übersetzungen
Variable Components ermöglichen es, dynamische Inhalte sicher innerhalb von <T>-Komponenten einzubinden. Sie übernehmen Formatierung und Lokalisierung lokal, ohne Daten an die Übersetzungs-API zu senden, und eignen sich damit ideal für sensible Informationen wie Benutzernamen, Kontonummern und Finanzdaten.
Verfügbare Komponenten
<Var>: Unformatierte dynamische Inhalte<Num>: Zahlen mit lokalespezifischer Formatierung<Currency>: Währungswerte mit Symbolen und Formatierung<DateTime>: Datums- und Zeitangaben gemäß lokalen Konventionen
Schnellstart
Variable-Komponenten funktionieren innerhalb von <T>, um dynamische Inhalte zu handhaben:
import { T, Var, Num, Currency, DateTime } from 'gt-react';
function UserProfile({ user }) {
return (
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
<p>Du hast <Num>{user.itemCount}</Num> Artikel.</p>
<p>Kontostand: <Currency currency="USD">{user.balance}</Currency></p>
<p>Letzte Anmeldung: <DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Funktionsweise von Variablenkomponenten
Variablenkomponenten lösen das Problem dynamischer Inhalte, indem sie:
- dynamische Werte kapseln, damit sie innerhalb von
<T>verwendet werden können - die Formatierung lokal durchführen, indem die integrierten i18n‑APIs des Browsers genutzt werden
- Daten privat halten – Inhalte werden niemals an die Übersetzungs‑API gesendet
- Lokalisierung bereitstellen, basierend auf der aktuellen Locale des Nutzers
// ❌ Das schlägt fehl – dynamischer Inhalt in <T>
<T><p>Hallo {username}</p></T>
// ✅ Das funktioniert – dynamischer Inhalt gekapselt
<T><p>Hallo <Var>{username}</Var></p></T>Komponentenhandbuch
<Var> – Unformatierte dynamische Inhalte
Verwenden Sie <Var> für alle dynamischen Inhalte, die keine besondere Formatierung benötigen:
// User information
<T>
<p>Hallo, <Var>{user.name}</Var>!</p>
<p>Ihre Kontonummer ist <Var>{user.accountId}</Var></p>
</T>
// Conditional rendering
<T>
Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> – formatierte Zahlen
Verwenden Sie <Num> für Zahlen, die gemäß den Formatierungsregeln der jeweiligen locale ausgegeben werden sollen:
// Grundlegende Zahlenformatierung
<T>
Du hast <Num>{itemCount}</Num> Artikel in deinem Warenkorb.
</T>
// Eigenständige Verwendung (entspricht number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>
// Benutzerdefinierte Formatierungsoptionen
<T>
Entfernung: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> – Geldbeträge
Verwenden Sie <Currency> für Geldbeträge:
// Grundlegende Währungsformatierung (Standard ist „USD“)
<T>
Ihre Gesamtsumme beträgt <Currency>{total}</Currency>.
</T>
// Verschiedene Währungen
<T>
Preis: <Currency currency="EUR">{price}</Currency>
</T>
// Benutzerdefiniertes Format
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> – Datum und Uhrzeit
Verwenden Sie <DateTime> für Datum und Uhrzeit:
// Grundlegende Datumsformatierung
<T>
Bestellung aufgegeben am <DateTime>{orderDate}</DateTime>
</T>
// Zeitformatierung
<T>
Zuletzt aktualisiert: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// Benutzerdefiniertes Datumsformat
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>Datenschutz und Sicherheit
Daten bleiben lokal
Variable-Komponenten übernehmen die gesamte Formatierung lokal mithilfe der Intl APIs des Browsers. Es werden keine dynamischen Inhalte an die Übersetzungs-API gesendet, wodurch sie ideal sind für:
- Benutzernamen und persönliche Informationen
- Kontonummern und IDs
- Finanzdaten und Kontostände
- Private Zeitstempel und Datumsangaben
// Sicher – sensible Daten bleiben lokal
<T>
Kontostand: <Currency currency="USD">{balance}</Currency>
Letzter Login: <DateTime>{lastLoginTime}</DateTime>
</T>Wichtige Ausnahme
Seien Sie vorsichtig mit verschachtelten <T>-Komponenten innerhalb von Komponenten für Variablen:
// ⚠️ Der Inhalt innerhalb von <T> WIRD zur Übersetzung gesendet
<T>
<Var>
<T>Hallo, Welt!</T> {/* Dies wird übersetzt */}
{privateData} {/* Dies bleibt lokal */}
</Var>
</T>Eigenständige Verwendung
Variable-Komponenten können außerhalb von <T> für reines Formatieren verwendet werden:
// Diese verhalten sich wie ihre jeweiligen .toLocale*()-Methoden
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // Preisformatierung
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()Häufige Probleme
Lokalisierungsoptionen ignorieren
Für <Currency> geben Sie unbedingt das currency-Prop an, um den Währungstyp festzulegen. So wird beim Anzeigen des value das korrekte Währungssymbol und die richtige Formatierung verwendet:
// ❌ Standardmäßig USD – entspricht möglicherweise nicht den Erwartungen der Nutzer
<T>
Der Artikel kostet <Currency>{price}</Currency>
</T>
// ✅ Währung explizit angeben
<T>
Der Artikel kostet <Currency currency="EUR">{price}</Currency>
</T>Andere Komponenten verfügen ebenfalls über optionale Props, mit denen Sie die Formatierung anpassen können:
// Basic formatting
<T>
<Num>{count}</Num> Artikel auf Lager
</T>
// Custom formatting
<T>
<Num options={{ style: 'percent' }}>{percentage}</Num> Abschlussquote
</T>
// Date formatting
<T>
Zuletzt aktualisiert: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>Nächste Schritte
- Leitfaden zu Branching Components – Fügen Sie Ihren Übersetzungen bedingte Logik hinzu
- Leitfaden zur Zeichenkettenübersetzung – Übersetzen Sie Klartext ohne JSX
- API-Referenzen:
Wie ist diese Anleitung?