Übersicht

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

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

Sie übergeben einen Wert an den Parameter branch; dieser wird anhand der von Ihnen angegebenen Schlüssel einem Ausgabewert zugeordnet.

Referenz

Props

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

Rückgabewerte

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

Wirft

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

Beispiele

Grundlegende Verwendung

<Branch> muss für jeden möglichen Wert der branch-Prop 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, die den möglichen Werten von user.hairColor entsprechen.

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} 
      black={<p>Die Haare sind dunkel.</p>}
      brown="Die Haarfarbe liegt in der Mitte." // (you can pass a string if you prefer)
      blonde={<p>Die Haare sind hell.</p>}
    />
  );
}

Fallback-Inhalt

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

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <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> // [!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-react';

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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>Die 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-react';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Das Haar ist dunkel.</p>}
        brown={<p>Die Haarfarbe liegt in der Mitte.</p>}
        blonde={<p>Das Haar ist hell.</p>}
      >
        <p>Nicht unterstützte Haarfarbe: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Hinweise

• Die Schlüssel für Branches können beliebige Zeichenketten sein, die zum branch-Prop passen. Diese Flexibilität macht es einfach, <Branch> an eine Vielzahl von Anwendungsfällen anzupassen.
• Kombinieren Sie <Branch> mit anderen Komponenten wie <T> für Übersetzungen und Variablenkomponenten für dynamische Inhalte, um leistungsfähige, lokalisierte Interfaces zu erstellen.

Nächste Schritte

• Für weiterführende Anwendungsfälle und Beispiele siehe Using Branching Components.