GitHub

Variable-Komponenten ermöglichen es, dynamische Inhalte sicher innerhalb von <T>-Komponenten einzubetten. 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>: Unformatierter dynamischer Inhalt
<Num>: Zahlen mit lokalespezifischer Formatierung
<Currency>: Währungsbeträge 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>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, indem sie:

dynamische Werte kapseln, damit sie innerhalb von <T> verwendet werden können
die Formatierung lokal übernehmen 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 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 Inhaltselement

Verwenden Sie <Var> für dynamische Inhalte, die keine besondere 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

Verwende <Num> für Zahlen, die gemäß den Formatierungsregeln der jeweiligen 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>` – Geldbeträge

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 Datums- und Zeitangaben:

// 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 über die Intl APIs des Browsers. Es werden keine dynamischen 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 <Var>-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 auch außerhalb von <T> für reines Formatieren 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> stellen Sie sicher, dass Sie das currency-Prop übergeben, um den Währungstyp festzulegen. So wird gewährleistet, dass beim Anzeigen des value das richtige Währungssymbol und die korrekte Formatierung verwendet werden:

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

Auch andere Komponenten verfügen ü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 verzweigten Komponenten – Fügen Sie bedingte Logik zu Ihren Übersetzungen hinzu
Leitfaden zur Zeichenkettenübersetzung – Übersetzen Sie einfachen Text ohne JSX
API-Referenzen:

Verfügbare Komponenten

<Var>: Unformatierter dynamischer Inhalt
<Num>: Zahlen mit lokalespezifischer Formatierung
<Currency>: Währungsbeträge 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>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, indem sie:

dynamische Werte kapseln, damit sie innerhalb von <T> verwendet werden können
die Formatierung lokal übernehmen 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 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 Inhaltselement

Verwenden Sie <Var> für dynamische Inhalte, die keine besondere 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

Verwende <Num> für Zahlen, die gemäß den Formatierungsregeln der jeweiligen 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>` – Geldbeträge

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 Datums- und Zeitangaben:

// 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 über die Intl APIs des Browsers. Es werden keine dynamischen 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 <Var>-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 auch außerhalb von <T> für reines Formatieren 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

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

Auch andere Komponenten verfügen ü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 verzweigten Komponenten – Fügen Sie bedingte Logik zu Ihren Übersetzungen hinzu
Leitfaden zur Zeichenkettenübersetzung – Übersetzen Sie einfachen Text ohne JSX
API-Referenzen:

Verfügbare Komponenten

<Var>: Unformatierter dynamischer Inhalt
<Num>: Zahlen mit lokalespezifischer Formatierung
<Currency>: Währungsbeträge 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>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, indem sie:

dynamische Werte kapseln, damit sie innerhalb von <T> verwendet werden können
die Formatierung lokal übernehmen 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 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 Inhaltselement

Verwenden Sie <Var> für dynamische Inhalte, die keine besondere 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

Verwende <Num> für Zahlen, die gemäß den Formatierungsregeln der jeweiligen 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>` – Geldbeträge

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 Datums- und Zeitangaben:

// 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 über die Intl APIs des Browsers. Es werden keine dynamischen 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 <Var>-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 auch außerhalb von <T> für reines Formatieren 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

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

Auch andere Komponenten verfügen ü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 verzweigten Komponenten – Fügen Sie bedingte Logik zu Ihren Übersetzungen hinzu
Leitfaden zur Zeichenkettenübersetzung – Übersetzen Sie einfachen Text ohne JSX
API-Referenzen:

Variable-Komponenten

Auf dieser Seite

Variable-Komponenten

Auf dieser Seite

Variable-Komponenten

Auf dieser Seite

GitHubStern auf GitHub vergeben

GitHubStern auf GitHub vergeben

Stern auf GitHub vergeben

Stern auf GitHub vergeben