<Branch>

Übersicht

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 Branches darstellen. Zum Beispiel können Branches wie active und inactive als Parameter hinzugefügt werden.

Rückgabewert

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

Fehler

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

Beispiele

Grundlegende Verwendung

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

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 abzudecken.

import { Branch } from 'gt-react';

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 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>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, 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>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> 
  );
}

Variablen hinzufügen

Wenn Sie dynamische Werte im Branch ausgeben möchten, stellen Sie sicher, dass Sie diese in <Currency>, <DateTime>, <Num> oder <Var>-Komponenten einbetten.

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

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> // [!code highlight]
      </Branch>
    </T>
  );
}

Hinweise

• Die Schlüssel für Branches können beliebige Zeichenfolgen sein, die mit der branch-Prop ü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 Variablenkomponenten für dynamische Inhalte, um umfangreiche und lokalisierte Benutzeroberflächen zu erstellen.

Nächste Schritte

• Für weiterführende Nutzung und Beispiele siehe Verwendung von verzweigten Komponenten.
• Um mehr über variable Komponenten wie <Currency>, <DateTime>, <Num> und <Var> zu erfahren, lesen Sie die Dokumentation zu Verwendung von variablen Komponenten.