Variable Components
Verwendung von Variable Components für dynamische Inhalte in Übersetzungen
Variable Components ermöglichen es, dynamische Inhalte sicher innerhalb von <T>-Komponenten einzubinden. Sie übernehmen die Formatierung und Lokalisierung lokal, ohne Daten an die Übersetzungs-API zu senden, und sind damit ideal für sensible Informationen wie Benutzernamen, Kontonummern und Finanzdaten.
Verfügbare Komponenten
<Var>: Rohes dynamisches Content ohne Formatierung<Num>: Zahlen mit lokalspezifischer Formatierung<Currency>: Währungsbeträge 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>Guthaben: <Currency currency="USD">{user.balance}</Currency></p>
<p>Letzte Anmeldung: <DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Funktionsweise von Variable-Komponenten
Variable-Komponenten lösen das Problem dynamischer Inhalte durch:
- Umhüllen dynamischer Werte, damit sie innerhalb von
<T>verwendet werden können - Lokale Formatierung mithilfe der integrierten i18n-APIs des Browsers
- Wahrung der Datenprivatsphäre – Inhalte werden niemals an die Übersetzungs-API gesendet
- Lokalisierung basierend auf der aktuellen locale des Nutzers
// ❌ 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> - Rohes dynamisches Material
Verwenden Sie <Var> für dynamische Inhalte, die keine spezielle Formatierung benötigen:
// Benutzerinformationen
<T>
<p>Hallo, <Var>{user.name}</Var>!</p>
<p>Ihre Konto-ID ist <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 gemäß den Formatierungsregeln der locale dargestellt werden sollen:
// Grundlegende 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> – Geldwerte
Verwenden Sie <Currency> für Geldbeträge:
// Grundlegende Währungsformatierung (Standard ist „USD")
<T>
Ihr Gesamtbetrag ist <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 Uhrzeiten:
// 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 sich ideal eignen 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 Variable-Komponenten:
// ⚠️ Der innere <T> Inhalt 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> zur reinen Formatierung verwendet werden:
// Diese funktionieren 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> stell sicher, dass du das currency-Prop angibst, um den Währungstyp festzulegen. So wird beim Anzeigen des value das richtige Währungssymbol und die korrekte Formatierung verwendet:
// ❌ Standardmäßig USD - entspricht möglicherweise nicht den Benutzererwartungen
<T>
Der Artikel kostet <Currency>{price}</Currency>
</T>
// ✅ Währung explizit angeben
<T>
Der Artikel kostet <Currency currency="EUR">{price}</Currency>
</T>Andere Komponenten bieten ebenfalls 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> Fertigstellungsgrad
</T>
// Datumsformatierung
<T>
Zuletzt aktualisiert: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>Nächste Schritte
- Leitfaden zu verzweigenden Komponenten – Fügen Sie Ihren Übersetzungen bedingte Logik hinzu
- Leitfaden zur Zeichenkettenübersetzung – Übersetzen Sie reinen Text ohne JSX
- API-Referenzen:
Wie ist dieser Leitfaden?