Überblick

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 einen value an den Parameter branch; dieser wird anhand der von Ihnen angegebenen Schlüssel einem Ausgabewert zugeordnet.

Referenzen

Props

Die Syntax [key]: string steht für beliebige Schlüssel, die potenzielle Branches repräsentieren. Zum Beispiel können Branches wie active und inactive als Parameter hinzugefügt werden.

Rückgabe

JSX.Element, das den Inhalt für den angegebenen Branch oder den Standardwert enthält.

Löst aus

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

Beispiele

Grundlegende Verwendung

<Branch> muss für jeden möglichen Wert der branch-Prop eine unterschiedliche Ausgabe liefern.

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

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Die Haare sind dunkel.</p>}
      brown="Die Haare sind mittelbraun." // (Sie können auch einen String übergeben)
      blonde={<p>Die Haare sind hell.</p>}
    />
  );
}

Fallback-Inhalte

Die children werden immer als Standardwert verwendet, wenn keine Prop dem an branch übergebenen value entspricht.

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 mittelbraun.</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 einer <T>-Komponente.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Die Haare sind dunkel.</p>}
        brown={<p>Die Haare sind mittelbraun.</p>}
        blonde={<p>Die Haare sind hell.</p>}
      >
        <p>Die Haarfarbe ist unbekannt.</p> 
      </Branch>
    </T> 
  );
}

Variablen hinzufügen

Wenn Sie dynamische Werte in der Branch rendern möchten, stellen Sie sicher, dass Sie sie in die Komponenten <Currency>, <DateTime>, <Num> oder <Var> einschließen.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Ihre Haare sind dunkel.</p>}
        brown={<p>Ihre Haare sind mittelbraun.</p>}
        blonde={<p>Ihre Haare sind hell.</p>}
      >
        <p>Unbehandelte Haarfarbe: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Hinweise

• Die Schlüssel für Branches können beliebige Zeichenfolgen sein, die dem branch-Prop entsprechen. Diese Flexibilität erleichtert es, <Branch> für eine Vielzahl von Anwendungsfällen anzupassen.
• Kombinieren Sie <Branch> mit anderen Komponenten, z. B. <T> für Übersetzungen und Variable‑Komponenten für dynamische Inhalte, um ausdrucksstarke, lokalisierte Interfaces zu erstellen.

Nächste Schritte

• Weitere fortgeschrittene Anwendungsfälle und Beispiele findest du unter Branching Components verwenden.