<Branch>

Überblick

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

const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>

Sie übergeben einen Wert an den branch-Parameter, und dieser wird mit einem Ausgabewert basierend auf den von Ihnen bereitgestellten Schlüsseln abgeglichen.

Referenz

Props

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

Rückgabe

JSX.Element mit dem Inhalt, der dem angegebenen Zweig entspricht, oder dem Fallback-Inhalt.

Wirft

Error wenn die branch Prop nicht bereitgestellt oder ungültig ist.

Beispiele

Grundlegende Verwendung

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

In diesem Beispiel wird der Wert user.hairColor verwendet, um die Ausgabe zu bestimmen. Wir haben die Eigenschaften 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>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (you can pass a string if you prefer)
      blonde={<p>Their hair is light.</p>}
    />
  );
}

Fallback-Inhalt

Die children werden immer als Fallback verwendet, wenn keine Eigenschaft mit dem an branch übergebenen Wert übereinstimmt.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}

Übersetzen von <Branch>

Wenn Sie den Inhalt übersetzen möchten, umhüllen 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>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p> 
      </Branch>
    </T> 
  );
}

Hinzufügen von Variablen

Wenn Sie dynamische Werte im Branch rendern möchten, stellen Sie sicher, dass Sie sie in <Currency>, <DateTime>, <Num> oder <Var>-Komponenten umhüllen.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Hinweise

• Die Schlüssel für Branches können beliebige String-Werte sein, die mit der branch-Eigenschaft übereinstimmen. 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 Variablen-Komponenten für dynamische Inhalte, um reichhaltige und lokalisierte Benutzeroberflächen zu erstellen.

Nächste Schritte

• Für erweiterte Nutzung und Beispiele siehe Using Branching Components.
• Um mehr über Variablenkomponenten wie <Currency>, <DateTime>, <Num> und <Var> zu erfahren, siehe die Dokumentation zu Using Variable Components.