Übersicht

Die Komponente <Branch> ermöglicht es, einer Übersetzung bedingte Logik hinzuzufügen.

const status = 'active';
<Branch branch={status}
    active={<p>Der Benutzer ist aktiv.</p>}
    inactive={<p>Der Benutzer ist inaktiv.</p>}
/>

Sie übergeben dem Parameter branch einen Wert, der anhand der von Ihnen angegebenen Schlüssel einem Ausgabewert zugeordnet wird.

Referenz

Props

Die Syntax [key]: string kennzeichnet beliebige Schlüssel, die potenzielle Branches darstellen. Zum Beispiel können Branches wie active und inactive als Parameter hinzugefügt werden.

Rückgabewert

JSX.Element, der den Inhalt des angegebenen Branches oder den Standardwert enthält.

Ausnahmen

Error, wenn die branch-Prop fehlt oder ungültig ist.

Beispiele

Grundlegende Verwendung

<Branch> muss für jeden möglichen Wert des branch-Props eine andere Ausgabe liefern.

In diesem Beispiel wird der Wert von user.hairColor verwendet, um die Ausgabe zu bestimmen. Wir haben die Props black, brown und blonde definiert, um den möglichen Werten von user.hairColor zu entsprechen.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Ihr Haar ist dunkel.</p>}
      brown="Ihr Haar ist mittelbraun." // (Sie können einen String übergeben, wenn Sie möchten)
      blonde={<p>Ihr Haar ist hell.</p>}
    />
  );
}

Fallback-Inhalt

Die children werden immer als Standardwert verwendet, wenn kein Prop mit dem an branch übergebenen Wert übereinstimmt.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Ihre Haare sind dunkel.</p>}
      brown={<p>Ihre Haare sind braun.</p>}
      blonde={<p>Ihre Haare sind hell.</p>}
    >
      <p>Ihre Haarfarbe ist unbekannt.</p> // [!code highlight]
    </Branch>
  );
}

Übersetzen von <Branch>

Wenn Sie den Inhalt übersetzen möchten, umschließen Sie ihn einfach mit der Komponente <T>.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Ihr Haar ist dunkel.</p>}
        brown={<p>Ihr Haar ist braun.</p>}
        blonde={<p>Ihr Haar ist blond.</p>}
      >
        <p>Ihre Haarfarbe ist unbekannt.</p>
      </Branch>
    </T> 
  );
}

Variablen hinzufügen

Wenn Sie dynamische Werte im Branch rendern möchten, achten Sie darauf, diese in die Komponenten <Currency>, <DateTime>, <Num> oder <Var> zu kapseln.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Ihr Haar ist dunkel.</p>}
        brown={<p>Ihr Haar ist braun.</p>}
        blonde={<p>Ihr Haar ist hell.</p>}
      >
        <p>Nicht behandelte Haarfarbe: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Hinweise

• Die Schlüssel für Branches können beliebige Zeichenketten sein, die dem Branch-Prop entsprechen. Diese Flexibilität erleichtert es, <Branch> an eine Vielzahl von Anwendungsfällen anzupassen.
• Kombinieren Sie <Branch> mit anderen Komponenten wie <T> für Übersetzungen und Variable-Komponenten für dynamische Inhalte, um umfangreiche, lokalisierte Oberflächen zu erstellen.

Nächste Schritte

• Für weiterführende Nutzung und Beispiele siehe Verwendung verzweigter Komponenten.