Übersicht

Die Komponente <Branch> ermöglicht es, Übersetzungen mit Bedingungen zu versehen.

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

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

Referenzen

Props

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

Rückgabe

JSX.Element mit dem Inhalt des angegebenen Branches oder dem Standardwert.

Wirft

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

Beispiele

Grundlegende Verwendung

<Branch> muss für jeden möglichen Wert des branch-Props eine eigene 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 die möglichen Werte von user.hairColor abzubilden.

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} 
      black={<p>Die Haare sind dunkel.</p>}
      brown="Die Haare sind mittel." // (Sie können alternativ einen String übergeben)
      blonde={<p>Die Haare sind 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-react';

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

Übersetzen von <Branch>

Wenn Sie den Inhalt übersetzen möchten, kapseln Sie ihn einfach in eine <T>-Komponente.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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 im Branch ausgeben möchten, achten Sie darauf, sie in die Komponenten <Currency>, <DateTime>, <Num> oder <Var> zu kapseln.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Die Haare sind dunkel.</p>}
        brown={<p>Die Haarfarbe ist mittelbraun.</p>}
        blonde={<p>Die Haare sind hell.</p>}
      >
        <p>Nicht erkannte Haarfarbe: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Hinweise

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

Nächste Schritte

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