Verzweigungskomponenten
So verwenden Sie Verzweigungskomponenten für bedingte Inhalte in Übersetzungen
Verzweigungskomponenten ermöglichen die bedingte Ausgabe von Inhalten innerhalb von <T>-Komponenten. Sie übernehmen dynamische Logik wie If/Else-Anweisungen und Pluralbildung und stellen sicher, dass alle Inhaltsvarianten korrekt übersetzt werden können.
Verfügbare Komponenten
<Branch>: Bedingte Inhalte auf Basis von Werten oder Zuständen<Plural>: Automatische Pluralbildung nach locale-spezifischen Regeln
Schnellstart
Branching-Komponenten funktionieren innerhalb von <T> und übernehmen dort die bedingte Logik:
import { T, Branch, Plural, Num, Var } from 'gt-react';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> ist gerade online</p>}
away={<p><Var>{user.name}</Var> ist abwesend</p>}
>
<p>Status von <Var>{user.name}</Var> unbekannt</p>
</Branch>
<Plural
n={messageCount}
one={<p>Du hast <Num>{messageCount}</Num> Nachricht</p>}
other={<p>Du hast <Num>{messageCount}</Num> Nachrichten</p>}
/>
</T>
);
}Funktionsweise verzweigender Komponenten
Verzweigende Komponenten lösen bedingtes Rendering in Übersetzungen, indem sie:
- Ternäre Operatoren ersetzen und bedingte Logik innerhalb von
<T>ablösen - Fallback‑Inhalte bereitstellen, wenn Bedingungen nicht den erwarteten Werten entsprechen
- Die Übersetzung aller möglichen Inhaltsvarianten ermöglichen
- Locale‑Regeln automatisch befolgen und so die Pluralbildung korrekt anwenden
// ❌ Das funktioniert nicht – Bedingungslogik in <T>
<T><p>{isActive ? 'Benutzer ist aktiv' : 'Benutzer ist inaktiv'}</p></T>
// ✅ So funktioniert es – Bedingungslogik mit Verzweigung
<T>
<Branch
branch={isActive}
true={<p>Benutzer ist aktiv</p>}
false={<p>Benutzer ist inaktiv</p>}
/>
</T>Komponentenhandbuch
<Branch> – Bedingte Inhalte
Verwenden Sie <Branch> für bedingtes Rendering auf Basis von Werten oder Zuständen:
// Benutzerstatusanzeige
<T>
<Branch
branch={user.role}
admin={<p>Administrator-Dashboard</p>}
user={<p>Benutzer-Dashboard</p>}
guest={<p>Gastzugriff</p>}
>
<p>Zugriffsebene unbekannt</p>
</Branch>
</T>
// Boolesche Bedingungen
<T>
<Branch
branch={isLoggedIn}
true={<p>Willkommen zurück!</p>}
false={<p>Bitte melden Sie sich an</p>}
/>
</T>
// Abonnementstufen
<T>
<Branch
branch={subscription.tier}
free={<p>Führen Sie ein Upgrade durch, um Premiumfunktionen freizuschalten</p>}
premium={<p>Viel Spaß mit Ihrem Premium-Erlebnis</p>}
enterprise={<p>Kontaktieren Sie den Support für Enterprise-Lösungen</p>}
>
<p>Abonnementstatus nicht verfügbar</p>
</Branch>
</T><Plural> - Intelligente Pluralbildung
Verwenden Sie <Plural> für Inhalte, die sich abhängig von der Anzahl ändern:
// Einfache Pluralbildung
<T>
<Plural
n={itemCount}
one={<p><Num>{itemCount}</Num> Artikel im Warenkorb</p>}
other={<p><Num>{itemCount}</Num> Artikel im Warenkorb</p>}
/>
</T>
// Umgang mit Null
<T>
<Plural
n={notifications}
zero={<p>Keine neuen Benachrichtigungen</p>}
one={<p><Num>{notifications}</Num> Benachrichtigung</p>}
other={<p><Num>{notifications}</Num> Benachrichtigungen</p>}
/>
</T>
// Komplexe Pluralbildung (nach Unicode-CLDR-Regeln)
<T>
<Plural
n={days}
zero={<p>Heute fällig</p>}
one={<p>Fällig in <Num>{days}</Num> Tag</p>}
few={<p>Fällig in <Num>{days}</Num> Tagen</p>}
many={<p>Fällig in <Num>{days}</Num> Tagen</p>}
other={<p>Fällig in <Num>{days}</Num> Tagen</p>}
/>
</T>Kombination mit Variablenkomponenten
Branching und Variablenkomponenten funktionieren nahtlos zusammen:
<T>
<Branch
branch={order.status}
pending={
<p>
Bestellung <Var>{order.id}</Var> ist ausstehend.
Gesamt: <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
Bestellung <Var>{order.id}</Var> wurde am <DateTime>{order.shippedDate}</DateTime> versendet
</p>
}
delivered={
<p>Bestellung <Var>{order.id}</Var> wurde erfolgreich zugestellt</p>
}
>
<p>Bestellstatus unbekannt</p>
</Branch>
</T>Wann Sie Branching Components verwenden sollten
Ternäre Operatoren ersetzen
Wandeln Sie bedingte Logik so um, dass sie innerhalb von <T> verwendet werden kann:
// ❌ Ternary-Operator kann in <T> nicht verwendet werden
<T>{isActive ? <p>Aktiver Nutzer</p> : <p>Inaktiver Nutzer</p>}</T>
// ✅ Verwende stattdessen Branch
<T>
<Branch
branch={isActive}
true={<p>Aktiver Nutzer</p>}
false={<p>Inaktiver Nutzer</p>}
/>
</T>Mehrere Bedingungen behandeln
Ersetzen Sie switch-Anweisungen oder mehrere if/else-Verzweigungen:
// ❌ Komplexe bedingte Logik
<T>
{status === 'loading' ? <p>Laden …</p> :
status === 'error' ? <p>Es ist ein Fehler aufgetreten</p> :
status === 'success' ? <p>Erfolgreich!</p> :
<p>Unbekannter Status</p>}
</T>
// ✅ Klare Verzweigungslogik
<T>
<Branch
branch={status}
loading={<p>Laden …</p>}
error={<p>Es ist ein Fehler aufgetreten</p>}
success={<p>Erfolgreich!</p>}
>
<p>Unbekannter Status</p>
</Branch>
</T>Regeln zur Pluralbildung
Ersetzen Sie die manuelle Pluralverarbeitung:
// ❌ Manuelle Pluralbildung
<T>{count === 1 ? <p>1 Artikel</p> : <p>{count} Artikel</p>}</T>
// ✅ Automatische Pluralbildung
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> Artikel</p>}
other={<p><Num>{count}</Num> Artikel</p>}
/>
</T>Eigenständige Verwendung
Verzweigungskomponenten können außerhalb von <T> für reine Logik ohne Übersetzung verwendet werden:
// Reines bedingtes Rendering
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Reine Pluralbildung
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Häufige Probleme
Fehlende Branch-Schlüssel
Geben Sie immer einen Standardwert für nicht passende Werte an:
// ❌ Kein Standardwert für unerwartete Werte
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// Was, wenn userRole „moderator“ ist?
/>
// ✅ Immer einen Standardwert vorsehen
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Standardwert für alle anderen Werte */}
</Branch>Unvollständige Pluralformen
Geben Sie die erforderlichen Pluralformen für Ihre Standardlocale an:
// ❌ Fehlende „other“-Form
<Plural
n={count}
one={<p>1 Artikel</p>}
// Wie sieht es mit 0, 2, 3 usw. aus?
/>
// ✅ Erforderliche Formen einbeziehen
<Plural
n={count}
zero={<p>Keine Artikel</p>}
one={<p>1 Artikel</p>}
other={<p>{count} Artikel</p>}
/>Komplexe verschachtelte Logik
Auch wenn das funktioniert, empfehlen wir, die Verzweigungslogik einfach zu halten und tiefe Verschachtelung zu vermeiden:
// ❌ Komplexe geschachtelte Verzweigungen
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Schwer zu lesen und zu pflegen */}
</Branch>
</Branch>
// ✅ Logik vereinfachen oder mehrere Komponenten nutzen
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Erfahren Sie mehr über Pluralbildungsregeln in der Unicode‑CLDR‑Dokumentation.
Nächste Schritte
- Leitfaden zur String-Übersetzung - Klartext ohne JSX übersetzen
- Leitfaden für dynamische Inhalte - Übersetzung zur Laufzeit
- API-Referenzen:
Wie ist diese Anleitung?