Variable Components
Verwendung variabler Komponenten 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 daher ideal für sensible Informationen wie Benutzernamen, Kontonummern und Finanzdaten.
Verfügbare Komponenten
<Var>: Unformatierter dynamischer Inhalt<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> und verarbeiten dort dynamische Inhalte:
import { T, Var, Num, Currency, DateTime } from 'gt-next';
function UserProfile({ user }) {
return (
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
<p>Sie haben <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 Variable Components
Variable Components lösen das Problem dynamischer Inhalte, indem sie:
- dynamische Werte kapseln, damit sie innerhalb von
<T>verwendet werden können - Formatierung lokal ausführen – mithilfe der integrierten i18n‑APIs des Browsers
- Daten privat halten – Inhalte werden niemals an die Übersetzungs‑API gesendet
- Lokalisierung bereitstellen – basierend auf der aktuellen Locale des Benutzers
// ❌ Das funktioniert nicht - dynamischer Inhalt in <T>
<T><p>Hello {username}</p></T>
// ✅ Das funktioniert - dynamischer Inhalt umschlossen
<T><p>Hello <Var>{username}</Var></p></T>Komponentenhandbuch
<Var> - Unformatierter dynamischer Inhalt
Verwenden Sie <Var> für beliebige dynamische Inhalte, die keine besondere Formatierung benötigen:
// Benutzerinformationen
<T>
<p>Hallo <Var>{user.name}</Var>!</p>
<p>Ihre Konto-ID lautet <Var>{user.accountId}</Var></p>
</T>
// Bedingte Darstellung
<T>
Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - Formatierte Zahlen
Verwenden Sie <Num> für Zahlen, die den Formatierungsregeln der jeweiligen locale folgen sollen:
// Einfache Zahlenformatierung
<T>
Sie haben <Num>{itemCount}</Num> Artikel in Ihrem 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 (Standardwert ist „USD")
<T>
Ihr Gesamtbetrag beträgt <Currency>{total}</Currency>.
</T>
// Verschiedene Währungen
<T>
Preis: <Currency currency="EUR">{price}</Currency>
</T>
// Benutzerdefinierte Formatierung
<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 keinerlei dynamische Inhalte an die Übersetzungs‑API gesendet, was sie ideal macht 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>
Letzte Anmeldung: <DateTime>{lastLoginTime}</DateTime>
</T>Wichtige Ausnahme
Seien Sie vorsichtig mit verschachtelten <T>-Komponenten innerhalb von Komponenten mit Variablen:
// ⚠️ Der innere <T>-Inhalt WIRD zur Übersetzung gesendet
<T>
<Var>
<T>Hello, world!</T> {/* Wird übersetzt */}
{privateData} {/* Bleibt lokal */}
</Var>
</T>Eigenständige Verwendung
Variablenkomponenten können außerhalb von <T> zur reinen Formatierung verwendet werden:
// Diese funktionieren wie die jeweiligen .toLocale*()-Methoden
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // Formatierung des Preises
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()Häufige Probleme
Lokalisierungsoptionen ignorieren
Für <Currency> stellen Sie sicher, dass Sie die currency-Prop übergeben, 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 Benutzer
<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:
// Grundlegende Formatierung
<T>
<Num>{count}</Num> Artikel auf Lager
</T>
// Benutzerdefinierte Formatierung
<T>
<Num options={{ style: 'percent' }}>{percentage}</Num> Abschlussrate
</T>
// Datumsformatierung
<T>
Zuletzt aktualisiert: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>Nächste Schritte
- Leitfaden zu Branching-Komponenten - Fügen Sie Ihren Übersetzungen bedingte Logik hinzu
- Leitfaden zur Zeichenkettenübersetzung - Übersetzen Sie Klartext ohne JSX
- API-Referenzen:
Wie ist diese Anleitung?