Verzweigungskomponenten
Verwendung von Verzweigungskomponenten für bedingte Inhalte in Übersetzungen
Verzweigungskomponenten ermöglichen das bedingte Rendern von Inhalten innerhalb von <T>-Komponenten. Sie übernehmen dynamische Logik wie if/else-Anweisungen und Regeln zur 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 lokalespezifischen Regeln
Schnellstart
Branching-Komponenten funktionieren innerhalb von <T> und übernehmen dort die bedingte Logik:
import { T, Branch, Plural, Num, Var } from 'gt-next';
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>
);
}So funktionieren verzweigende Komponenten
Verzweigende Komponenten lösen bedingtes Rendering in Übersetzungen, indem sie:
- ternäre Operatoren ersetzen und bedingte Logik innerhalb von
<T>abbilden - Fallback-Inhalt bereitstellen, wenn Bedingungen nicht den erwarteten Werten entsprechen
- die Übersetzung aller möglichen Inhaltsvarianten ermöglichen
- automatisch die locale‑Regeln für Pluralbildung berücksichtigen
// ❌ Das funktioniert nicht – bedingte Logik in <T>
<T><p>{isActive ? 'Nutzer ist aktiv' : 'Nutzer ist inaktiv'}</p></T>
// ✅ Das funktioniert – bedingte Logik mit Verzweigung
<T>
<Branch
branch={isActive}
true={<p>Nutzer ist aktiv</p>}
false={<p>Nutzer ist inaktiv</p>}
/>
</T>Komponentenhandbuch
<Branch> – Bedingte Inhalte
Verwenden Sie <Branch> für jede Form bedingten Renderings auf Basis von Werten oder Zuständen:
// Anzeige des Benutzerstatus
<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>Upgrade durchführen, 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
Verwende <Plural> für Inhalte, die sich je nach 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 (entspricht den 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 Variablen-Komponenten
Branching und Variablen-Komponenten arbeiten nahtlos zusammen:
<T>
<Branch
branch={order.status}
pending={
<p>
Bestellung <Var>{order.id}</Var> ist noch ausstehend.
Gesamt: <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
Bestellung <Var>{order.id}</Var> wurde am <DateTime>{order.shippedDate}</DateTime> versandt
</p>
}
delivered={
<p>Bestellung <Var>{order.id}</Var> wurde erfolgreich zugestellt</p>
}
>
<p>Bestellstatus unbekannt</p>
</Branch>
</T>Wann Branching Components verwenden
Ternäre Operatoren ersetzen
Wandeln Sie bedingte Logik für die Verwendung innerhalb von <T> um:
// ❌ Ternary-Operator kann in <T> nicht verwendet werden
<T>{isActive ? <p>Aktiver Nutzer</p> : <p>Inaktiver Nutzer</p>}</T>
// ✅ Verwenden Sie 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-Bedingungen:
// ❌ Komplexe Bedingungslogik
<T>
{status === 'loading' ? <p>Lädt...</p> :
status === 'error' ? <p>Fehler aufgetreten</p> :
status === 'success' ? <p>Erfolgreich!</p> :
<p>Unbekannter Status</p>}
</T>
// ✅ Übersichtliche Verzweigungslogik
<T>
<Branch
branch={status}
loading={<p>Lädt...</p>}
error={<p>Fehler aufgetreten</p>}
success={<p>Erfolgreich!</p>}
>
<p>Unbekannter Status</p>
</Branch>
</T>Regeln zur Pluralbildung
Ersetzen Sie die manuelle Behandlung von Pluralformen:
// ❌ 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
Branching-Komponenten können außerhalb von <T> für reine Logik ohne Übersetzung verwendet werden:
// Rein bedingte Darstellung
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Reine Pluralbildung
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Häufige Probleme
Fehlende Branch-Keys
Gib immer Standardinhalt 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 angeben
<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 Standard-Locale an:
// ❌ Fehlende „other"-Form
<Plural
n={count}
one={<p>1 Element</p>}
// Was ist mit 0, 2, 3 usw.?
/>
// ✅ Erforderliche Formen einschließen
<Plural
n={count}
zero={<p>Keine Elemente</p>}
one={<p>1 Element</p>}
other={<p>{count} Elemente</p>}
/>Komplexe verschachtelte Logik
Auch wenn das funktioniert, empfehlen wir, die Verzweigungslogik möglichst einfach zu halten und tiefes Verschachteln zu vermeiden:
// ❌ Komplexe, verschachtelte Verzweigungen
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Schwer zu lesen und zu pflegen */}
</Branch>
</Branch>
// ✅ Logik vereinfachen oder mehrere Komponenten verwenden
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Erfahren Sie mehr über Pluralregeln in der Unicode‑CLDR‑Dokumentation.
Nächste Schritte
- Leitfaden zur String-Übersetzung - Einfachen Text ohne JSX übersetzen
- Leitfaden für dynamische Inhalte - Übersetzung zur Laufzeit verarbeiten
- API-Referenzen:
Wie ist diese Anleitung?