Verzweigungskomponenten
Verwendung von Verzweigungskomponenten für bedingte Inhalte in Übersetzungen
Verzweigungskomponenten ermöglichen die bedingte Darstellung von Inhalten innerhalb von <T>-Komponenten. Sie verarbeiten 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 lokalespezifischen Regeln
Schnellstart
Verzweigungskomponenten funktionieren innerhalb von <T>, um bedingte Logik zu handhaben:
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 derzeit 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>Sie haben <Num>{messageCount}</Num> Nachricht</p>}
other={<p>Sie haben <Num>{messageCount}</Num> Nachrichten</p>}
/>
</T>
);
}Funktionsweise verzweigender Komponenten
Verzweigende Komponenten lösen bedingtes Rendering in Übersetzungen durch:
- Ersetzen von Ternäroperatoren und bedingter Logik innerhalb von
<T> - Bereitstellen von Standardinhalten, wenn Bedingungen nicht den erwarteten Werten entsprechen
- Ermöglichen der Übersetzung aller möglichen Inhaltsvarianten
- Automatisches Befolgen von Locale-Regeln für die Pluralbildung
// ❌ Das funktioniert nicht - bedingte Logik in <T>
<T><p>{isActive ? 'Benutzer ist aktiv' : 'Benutzer ist inaktiv'}</p></T>
// ✅ Das funktioniert - bedingte Logik mit Verzweigung
<T>
<Branch
branch={isActive}
true={<p>Benutzer ist aktiv</p>}
false={<p>Benutzer ist inaktiv</p>}
/>
</T>Komponentenleitfaden
<Branch> - Bedingte Inhalte
Verwende <Branch> für jegliches 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>Gastzugang</p>}
>
<p>Zugriffslevel 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>
// Abonnement-Stufen
<T>
<Branch
branch={subscription.tier}
free={<p>Upgraden Sie, um Premium-Funktionen freizuschalten</p>}
premium={<p>Genießen Sie Ihre Premium-Erfahrung</p>}
enterprise={<p>Kontaktieren Sie den Support für Unternehmenslösungen</p>}
>
<p>Abonnement-Status nicht verfügbar</p>
</Branch>
</T><Plural> - Intelligente Pluralbildung
Verwenden Sie <Plural> für Inhalte, die sich abhängig von der Anzahl ändern:
// Grundlegende Pluralbildung
<T>
<Plural
n={itemCount}
one={<p><Num>{itemCount}</Num> Artikel im Warenkorb</p>}
other={<p><Num>{itemCount}</Num> Artikel im Warenkorb</p>}
/>
</T>
// Null-Behandlung
<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 (folgt 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 Variable-Komponenten
Branching- und Variable-Komponenten funktionieren nahtlos zusammen:
<T>
<Branch
branch={order.status}
pending={
<p>
Bestellung <Var>{order.id}</Var> ist in Bearbeitung.
Gesamtbetrag: <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 Sie Branching Components verwenden sollten
Ternäre Operatoren ersetzen
Konvertieren Sie bedingte Logik für die Verwendung innerhalb von <T>:
// ❌ Kann keinen ternären Operator in <T> verwenden
<T>{isActive ? <p>Aktiver Benutzer</p> : <p>Inaktiver Benutzer</p>}</T>
// ✅ Verwende stattdessen Branch
<T>
<Branch
branch={isActive}
true={<p>Aktiver Benutzer</p>}
false={<p>Inaktiver Benutzer</p>}
/>
</T>Mehrere Bedingungen behandeln
Ersetzen Sie switch-Anweisungen oder mehrere if/else-Bedingungen:
// ❌ Komplexe bedingte Logik
<T>
{status === 'loading' ? <p>Lädt...</p> :
status === 'error' ? <p>Fehler aufgetreten</p> :
status === 'success' ? <p>Erfolgreich!</p> :
<p>Unbekannter Status</p>}
</T>
// ✅ Saubere 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 Pluralbehandlung:
// ❌ Manuelle Pluralbildung
<T>{count === 1 ? <p>1 Element</p> : <p>{count} Elemente</p>}</T>
// ✅ Automatische Pluralbildung
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> Element</p>}
other={<p><Num>{count}</Num> Elemente</p>}
/>
</T>Eigenständige Verwendung
Branching-Komponenten können außerhalb von <T> für reine Logik ohne Übersetzung eingesetzt werden:
// Reine 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
Geben Sie immer Standardwert-Inhalte für nicht zugeordnete Werte an:
// ❌ Kein Standardwert für unerwartete Werte
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// Was ist, wenn userRole „moderator" ist?
/>
// ✅ Immer Standardwert einschließen
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Standardwert für jeden anderen Wert */}
</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 einbeziehen
<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 tiefe Verschachtelungen zu vermeiden:
// ❌ Komplexe verschachtelte Verzweigung
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Schwer zu lesen und zu warten */}
</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 Pluralbildungsregeln in der Unicode-CLDR-Dokumentation.
Nächste Schritte
- Leitfaden zur String-Übersetzung - Klartext ohne JSX übersetzen
- Leitfaden für dynamische Inhalte - Übersetzungen zur Laufzeit verarbeiten
- API-Referenzen:
Wie ist dieser Leitfaden?