Verwendung von Branches

Übersicht

Branching-Komponenten in gt-next ermöglichen die dynamische Darstellung von Inhalten basierend auf bestimmten Bedingungen. Diese Komponenten umfassen:

• <Branch>: Stellt Inhalte basierend auf einer passenden branch-Eigenschaft dar.
• <Plural>: Stellt Inhalte basierend auf Pluralisierungsregeln für eine gegebene Zahl dar.

Beide Komponenten bieten leistungsstarke Werkzeuge zur Verwaltung von bedingter Logik und dynamischen Inhalten in lokalisierten Anwendungen.

In diesem Leitfaden behandeln wir:

Was sind Branch-Komponenten?

Branch-Komponenten wählen dynamisch aus, welcher Inhalt basierend auf einer bestimmten Bedingung oder einem Wert gerendert wird.

<Branch>

Die <Branch>-Komponente ermöglicht es dir, unterschiedlichen Inhalt basierend auf einem angegebenen branch-Wert zu rendern. Wenn kein passender Branch gefunden wird, wird der Fallback-children-Inhalt gerendert.

Zum Beispiel ist die <Branch>-Komponente perfekt für das bedingte Rendern basierend auf dem Anwendungszustand, den Benutzervorlieben oder beliebigen dynamischen Daten geeignet.

Der häufigste Anwendungsfall ist, sie als Ersatz für einen ternären oder bedingten Operator zu verwenden.

<Plural>

Die <Plural>-Komponente erweitert die Funktionalität von <Branch>, indem sie Pluralisierung und Zahlenübereinstimmung automatisch behandelt. Sie verwendet den angegebenen n-Wert, um anhand von lokalisierungsspezifischen Regeln zu bestimmen, welche Pluralform angezeigt wird.

Zum Beispiel ist die <Plural>-Komponente ideal, um Singular- und Pluraltexte dynamisch darzustellen, wie etwa „1 Artikel“ vs. „2 Artikel“.

Plural-Komponenten werden oft mit <Num>-Komponenten kombiniert, um eine Zahl und den dazugehörigen Text zu lokalisieren.

Verwendung mit <T>

Die <Branch>- und <Plural>-Komponenten sollten innerhalb einer <T>-Komponente verwendet werden, um dynamische Inhalte für die Übersetzung zu bereinigen.

Wenn sie innerhalb einer <T>-Komponente verwendet werden, wird der Inhalt automatisch übersetzt und in der vom Benutzer gewählten Sprache angezeigt.

Wenn sie eigenständig verwendet werden, rendern sie den Inhalt einfach wie er ist, ohne ihn zu übersetzen.

Verwendung von Branch-Komponenten

Verzweigungslogik mit <Branch>

Die <Branch>-Komponente wird für flexibles Umschalten von Inhalten basierend auf einem branch-Wert verwendet.

Sie können mehrere mögliche Branches definieren, und die Komponente rendert den Inhalt, der dem passenden Branch-Schlüssel entspricht.

Zusätzlich können Sie andere Variablenkomponenten in Kombination mit der <Branch>-Komponente verwenden.

const branch: 'option1' | 'option2' = 'option1';
<T>
  <Branch 
    branch={branch}
    option1={<p>Option 1</p>}
    option2={<p>Option 2</p>}
  >
    Fallback content
  </Branch>
</T>

Die <Branch>-Komponente sollte innerhalb einer <T>-Komponente verwendet werden. Dadurch kann der Inhalt automatisch übersetzt werden.

Weitere Informationen finden Sie in der API-Referenz.

Pluralisierung mit <Plural>

Die <Plural>-Komponente automatisiert die Pluralisierungslogik basierend auf dem Wert von n. Die Komponente wählt dynamisch die passende Pluralform für die angegebene Zahl und Sprache aus.

const count: number = 1;
<T>
  <Plural
    n={count}
    singular={<><Num>{1}</Num> item.</>}
    plural={<><Num>{count}</Num> items.</>}
    // Additional options
    zero={<><Num>{count}</Num> items.</>}
    one={<><Num>{count}</Num> item.</>}
    two={<><Num>{count}</Num> items.</>}
    few={<><Num>{count}</Num> items.</>}
    many={<><Num>{count}</Num> items.</>}
    other={<><Num>{count}</Num> items.</>}
    dual={<><Num>{count}</Num> items.</>}
  />
</T>

Die verfügbaren Pluralformen hängen von der Sprache ab und folgen den Unicode CLDR Pluralisierungsregeln.

Weitere Informationen finden Sie in der API-Referenz.

Wann sollten Branch-Komponenten verwendet werden

Branch-Komponenten sind wichtig, um dynamische Inhalte in deiner Anwendung zu verwalten.

Wenn du unterschiedliche Inhalte basierend auf einer Bedingung anzeigen musst, verwende <Branch>.

Diese Bedingungen können auf einer Variablen, einem Boolean oder einer Funktion basieren.

Zum Beispiel, wenn dein Code einen Ternary-Operator oder eine bedingte Darstellung verwendet, kannst du <Branch> als Ersatz nutzen.

const isActive = true;
// Ternary operator
<Branch branch={isActive} true={<p>The user is active.</p>} false={<p>The user is inactive.</p>}>
  <p>Status unknown.</p>
</Branch>

// Conditional rendering
<Branch branch={isActive} true={<p>The user is active.</p>}>
  <></>
</Branch>

// Ternary operator
const isActive = true;
{isActive ? <p>The user is active.</p> : <p>The user is inactive.</p>}

// Conditional rendering
{isActive && <p>The user is active.</p>}

Wenn du Inhalte mit korrekter Pluralisierung darstellen möchtest, verwende <Plural>.

const count = 1;
<Plural n={count} one={<p>1 item</p>} other={<p>{count} items</p>} />

const count = 1;
{count === 1 ? <p>1 item</p> : <p>{count} items</p>}

Beispiele

<Branch>

import { T, Branch, Var } from 'gt-next';

export default function UserStatus() {
  const [status, setStatus] = useState<'active' | 'inactive' | undefined>(undefined);
  const [name, setName] = useState<string>('John Doe');
  return (
    <T>
      <Branch
        branch={status}
        active={<p>The user <Var>{name}</Var> is active.</p>}
        inactive={<p>The user <Var>{name}</Var> is inactive.</p>}
      >
        <p>Status unknown.</p>
      </Branch>
    </T>
  );
}

Im obigen Beispiel wechselt die <Branch>-Komponente dynamisch zwischen 3 gerenderten Inhalten, basierend auf dem Wert von status.

Wenn status den Wert "active" hat, rendert die Komponente:

<p>The user <Var>{name}</Var> is active.</p>

Wenn status den Wert "inactive" hat, rendert die Komponente:

<p>The user <Var>{name}</Var> is inactive.</p>

Wenn status weder "active" noch "inactive" ist, rendert die Komponente den Fallback-Inhalt:

<p>Status unknown.</p>

Da die <Branch>-Komponente in eine <T>-Komponente eingebettet ist, wird der gerenderte Inhalt automatisch im Kontext übersetzt.

In diesem Beispiel werden je nach Abonnementplan des Benutzers unterschiedliche Beschreibungen angezeigt.

import { Branch } from 'gt-next';

export default function SubscriptionDetails() {
  const [plan, setPlan] = useState<'free' | 'premium' | 'enterprise' | undefined>(undefined);
  return (
    <Branch
      branch={plan}
      free={<p>You are on the Free plan. Upgrade to unlock more features!</p>}
      premium={<p>You are enjoying the Premium plan with full access to features.</p>}
      enterprise={<p>You are on the Enterprise plan. Contact support for tailored solutions.</p>}
    >
      <p>No subscription plan detected.</p>
    </Branch>
  );
}

• Die branch-Prop bestimmt, welche Plan-Nachricht angezeigt wird.
• Wenn plan "free", "premium" oder "enterprise" ist, wird die entsprechende Nachricht angezeigt.
• Wenn plan keinem dieser Werte entspricht, wird der Fallback-Inhalt ("No subscription plan detected.") angezeigt.

<Plural>

Die <Plural>-Komponente behandelt dynamisch Singular- und Pluralformen basierend auf dem Wert von n. Dieses Beispiel zeigt die Anzahl ungelesener Nachrichten im Posteingang eines Benutzers an.

import { T, Plural, Num } from 'gt-next';

export default function UnreadMessages() {
  const [unreadCount, setUnreadCount] = useState<number>(1);
  return (
    <T>
      <Plural
        n={unreadCount}
        one={<>You have <Num>{unreadCount}</Num> unread message.</>}
        other={<>You have <Num>{unreadCount}</Num> unread messages.</>}
      />
    </T>
  );
}

• Die n-Prop gibt die Anzahl der ungelesenen Nachrichten an.
• Wenn unreadCount 1 ist, rendert die Komponente: "You have 1 unread message."
• Für jeden anderen Wert rendert sie: "You have X unread messages.", wobei X der von <Num> formatierte Wert von unreadCount ist.

Häufige Fallstricke

Fehlende Branch-Werte

Wenn kein Branch-Wert angegeben wird oder keiner der Schlüssel übereinstimmt, rendert die <Branch>-Komponente den Fallback-Inhalt der Kinder. Stellen Sie immer sicher, dass die möglichen Branch-Schlüssel mit den an das branch-Prop übergebenen Werten übereinstimmen.

import { Branch } from 'gt-next';

export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>The user is active.</p>}
      inactive={<p>The user is inactive.</p>}
    >
      <p>Status unknown.</p>
    </Branch>
  );
}

Wenn status undefined ist oder einen anderen Wert als active oder inactive hat, wird der Fallback-Inhalt „Status unknown.” angezeigt.

Fehlende Pluralformen

Denken Sie daran, alle notwendigen Pluralformen in Ihrer Standardsprache anzugeben. So stellt gt-next sicher, dass Ihre Anwendung immer einen Fallback-Inhalt zum Anzeigen hat.

Wenn zum Beispiel Englisch Ihre Standardsprache ist, sollten Sie alle Pluralformen für Englisch bereitstellen.

import { Plural, Num } from 'gt-next';

<Plural
  n={count}
  one={<>You have <Num>{count}</Num> unread message.</>}
  other={<>You have <Num>{count}</Num> unread messages.</>}
/>

Hier haben wir die Pluralformen one und other für Englisch bereitgestellt.

Alternativ können Sie für Englisch auch singular und plural angeben.

Hinweise

• Branch-Komponenten sind unerlässlich für die Verwaltung von dynamischen und lokalisierten Inhalten in Anwendungen.
• Die <Branch>-Komponente ist äußerst flexibel und kann sich an verschiedene Bedingungen und Zustände anpassen.
• Die <Plural>-Komponente vereinfacht die Pluralbildung, indem sie automatisch die lokalspezifischen Regeln befolgt.
• Fügen Sie immer eine Fallback-children-Prop hinzu, um eine bessere Fehlerbehandlung und Benutzererfahrung zu gewährleisten.

Nächste Schritte

• Sieh dir <Branch> und <Plural> im API-Referenzbereich für weitere Details an.
• Erfahre mehr über Pluralisierungsregeln und Verzweigungslogik in den Unicode CLDR Pluralisierungsregeln.
• Entdecke, wie du Variable Components verwenden kannst.