Verwendung von Branches

Übersicht

Verzweigungskomponenten in gt-react ermöglichen die dynamische Darstellung von Inhalten basierend auf bestimmten Bedingungen. Diese Komponenten umfassen:

• <Branch>: Stellt Inhalte basierend auf einer passenden branch-Eigenschaft dar.
• <Plural>: Stellt Inhalte basierend auf Pluralisierungsregeln für eine gegebene Zahl dar.

Beide Komponenten bieten leistungsstarke Werkzeuge zur Verwaltung von bedingter Logik und dynamischen Inhalten in lokalisierten Anwendungen.

In diesem Leitfaden behandeln wir:

Was sind Branch-Komponenten?

Branch-Komponenten wählen dynamisch aus, welcher Inhalt basierend auf einer bestimmten Bedingung oder einem Wert gerendert werden soll.

<Branch>

Die <Branch>-Komponente ermöglicht es Ihnen, unterschiedliche Inhalte basierend auf einem bereitgestellten branch-Wert zu rendern. Wenn kein passender Branch gefunden wird, wird der Fallback-children-Inhalt gerendert.

Zum Beispiel ist die <Branch>-Komponente perfekt für bedingtes Rendern basierend auf dem Anwendungsstatus, Benutzereinstellungen oder beliebigen dynamischen Daten.

Der häufigste Anwendungsfall ist, sie als Ersatz für einen ternären oder bedingten Operator zu verwenden.

<Plural>

Die <Plural>-Komponente erweitert die Funktionalität von <Branch>, indem sie Pluralisierung und Zahlenübereinstimmung automatisch handhabt. Sie verwendet den bereitgestellten n-Wert, um zu bestimmen, welche Pluralform angezeigt werden soll, basierend auf sprachspezifischen Regeln.

Zum Beispiel ist die <Plural>-Komponente ideal für das dynamische Rendern von Singular- und Pluraltext, wie "1 Element" vs. "2 Elemente".

Plural-Komponenten werden oft mit <Num>-Komponenten kombiniert, um eine Zahl und den entsprechenden Text zu lokalisieren.

Verwendung mit <T>

Die <Branch>- und <Plural>-Komponenten sollten innerhalb einer <T>-Komponente verwendet werden, um dynamische Inhalte für die Übersetzung zu bereinigen.

Wenn sie innerhalb einer <T>-Komponente verwendet werden, wird der Inhalt automatisch übersetzt und in der vom Benutzer ausgewählten Sprache gerendert.

Wenn sie eigenständig verwendet werden, rendern sie den Inhalt einfach unverändert, ohne ihn zu übersetzen.

Verwendung von Branch-Komponenten

Verzweigungslogik mit <Branch>

Die <Branch>-Komponente wird für flexible Inhaltsumschaltung basierend auf einem branch-Wert verwendet.

Sie können mehrere mögliche Verzweigungen definieren, und die Komponente rendert den Inhalt, der dem passenden Branch-Schlüssel entspricht.

Zusätzlich können Sie andere variable Komponenten in Kombination mit der <Branch>-Komponente verwenden.

const branch: 'option1' | 'option2' = 'option1';
<T>
  <Branch 
    branch={branch}
    option1={<p>Option 1</p>}
    option2={<p>Option 2</p>}
  >
    Fallback content
  </Branch>
</T>

Die <Branch>-Komponente sollte innerhalb einer <T>-Komponente verwendet werden. Dies ermöglicht die automatische Übersetzung des Inhalts.

Weitere Details finden Sie in der API-Referenz.

Pluralisierung mit <Plural>

Die <Plural>-Komponente automatisiert die Pluralisierungslogik basierend auf dem Wert von n. Die Komponente wählt dynamisch die passende Pluralform für die angegebene Zahl und Sprache aus.

const count: number = 1;
<T>
  <Plural
    n={count}
    singular={<><Num>{1}</Num> item.</>}
    plural={<><Num>{count}</Num> items.</>}
    // Additional options
    zero={<><Num>{count}</Num> items.</>}
    one={<><Num>{count}</Num> item.</>}
    two={<><Num>{count}</Num> items.</>}
    few={<><Num>{count}</Num> items.</>}
    many={<><Num>{count}</Num> items.</>}
    other={<><Num>{count}</Num> items.</>}
    dual={<><Num>{count}</Num> items.</>}
  />
</T>

Die verfügbaren Pluralformen hängen von der Sprache ab und folgen den Unicode CLDR-Pluralisierungsregeln.

Weitere Details finden Sie in der API-Referenz.

Wann man Branch-Komponenten verwenden sollte

Branch-Komponenten sind wichtig für die Verwaltung dynamischer Inhalte in Ihrer Anwendung.

Wenn Sie verschiedene Inhalte basierend auf einer Bedingung anzeigen müssen, verwenden Sie <Branch>.

Diese Bedingungen können auf einer Variablenkomponente, einem booleschen Wert oder einer Funktion basieren.

Wenn Ihr Code beispielsweise einen ternären Operator oder bedingte Rendering verwendet, können Sie <Branch> verwenden, um diesen zu ersetzen.

const isActive = true;
// Ternary operator
<Branch branch={isActive} true={<p>The user is active.</p>} false={<p>The user is inactive.</p>}>
  <p>Status unknown.</p>
</Branch>

// Conditional rendering
<Branch branch={isActive} true={<p>The user is active.</p>}>
  <></>
</Branch>

// Ternary operator
const isActive = true;
{isActive ? <p>The user is active.</p> : <p>The user is inactive.</p>}

// Conditional rendering
{isActive && <p>The user is active.</p>}

Wenn Sie Inhalte mit korrekter Pluralisierung rendern möchten, verwenden Sie <Plural>.

const count = 1;
<Plural n={count} one={<p>1 item</p>} other={<p>{count} items</p>} />

const count = 1;
{count === 1 ? <p>1 item</p> : <p>{count} items</p>}

Beispiele

<Branch>

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

export default function UserStatus() {
  const [status, setStatus] = useState<'active' | 'inactive' | undefined>(undefined);
  const [name, setName] = useState<string>('John Doe');
  return (
    <T>
      <Branch
        branch={status}
        active={<p>The user <Var>{name}</Var> is active.</p>}
        inactive={<p>The user <Var>{name}</Var> is inactive.</p>}
      >
        <p>Status unknown.</p>
      </Branch>
    </T>
  );
}

Im obigen Beispiel wechselt die <Branch>-Komponente dynamisch zwischen 3 angezeigten Inhalten, basierend auf dem Wert von status.

Wenn status den Wert "active" hat, rendert die Komponente:

<p>The user <Var>{name}</Var> is active.</p>

Wenn status den Wert "inactive" hat, rendert die Komponente:

<p>The user <Var>{name}</Var> is inactive.</p>

Wenn status weder "active" noch "inactive" ist, rendert die Komponente den Fallback-Inhalt:

<p>Status unknown.</p>

Da die <Branch>-Komponente in eine <T>-Komponente eingebettet ist, wird der angezeigte Inhalt automatisch im Kontext übersetzt.

In diesem Beispiel werden unterschiedliche Beschreibungen angezeigt, je nach Abonnementplan des Nutzers.

import { Branch } from 'gt-react';

export default function SubscriptionDetails() {
  const [plan, setPlan] = useState<'free' | 'premium' | 'enterprise' | undefined>(undefined);
  return (
    <Branch
      branch={plan}
      free={<p>You are on the Free plan. Upgrade to unlock more features!</p>}
      premium={<p>You are enjoying the Premium plan with full access to features.</p>}
      enterprise={<p>You are on the Enterprise plan. Contact support for tailored solutions.</p>}
    >
      <p>No subscription plan detected.</p>
    </Branch>
  );
}

• Die branch-Eigenschaft bestimmt, welche Plan-Nachricht angezeigt wird.
• Wenn plan "free", "premium" oder "enterprise" ist, wird die entsprechende Nachricht angezeigt.
• Wenn plan keinen dieser Werte hat, wird der Fallback-Inhalt ("No subscription plan detected.") angezeigt.

<Plural>

Die <Plural>-Komponente behandelt dynamisch Singular- und Pluralformen basierend auf dem Wert von n. Dieses Beispiel zeigt die Anzahl ungelesener Nachrichten im Posteingang eines Nutzers an.

import { T, Plural, Num } from 'gt-react';

export default function UnreadMessages() {
  const [unreadCount, setUnreadCount] = useState<number>(1);
  return (
    <T>
      <Plural
        n={unreadCount}
        one={<>You have <Num>{unreadCount}</Num> unread message.</>}
        other={<>You have <Num>{unreadCount}</Num> unread messages.</>}
      />
    </T>
  );
}

• Die n-Eigenschaft gibt die Anzahl der ungelesenen Nachrichten an.
• Wenn unreadCount 1 ist, rendert die Komponente: "You have 1 unread message."
• Für jeden anderen Wert rendert sie: "You have X unread messages.", wobei X der von <Num> formatierte Wert von unreadCount ist.

Häufige Fallstricke

Fehlende Branch-Werte

Wenn ein Branch-Wert nicht angegeben wird oder keinem der Schlüssel entspricht, rendert die <Branch>-Komponente den Fallback-Inhalt. Stellen Sie immer sicher, dass die möglichen Branch-Schlüssel mit den an die Branch-Prop übergebenen Werten übereinstimmen.

import { Branch } from 'gt-react';

export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>The user is active.</p>}
      inactive={<p>The user is inactive.</p>}
    >
      <p>Status unknown.</p>
    </Branch>
  );
}

Wenn status undefined ist oder einen anderen Wert als active oder inactive hat, wird der Fallback-Inhalt "Status unknown." angezeigt.

Fehlende Pluralformen

Denken Sie daran, alle notwendigen Pluralformen in Ihrer Standardsprache anzugeben. So stellt gt-react sicher, dass Ihre Anwendung immer über Fallback-Inhalte verfügt, die angezeigt werden können.

Wenn Englisch Ihre Standardsprache ist, sollten Sie beispielsweise alle Pluralformen für Englisch bereitstellen.

import { Plural, Num } from 'gt-react';

<Plural
  n={count}
  one={<>You have <Num>{count}</Num> unread message.</>}
  other={<>You have <Num>{count}</Num> unread messages.</>}
/>

Hier haben wir die Pluralformen one und other für Englisch bereitgestellt.

Alternativ können Sie für Englisch auch singular und plural angeben.

Hinweise

• Branch-Komponenten sind unerlässlich für die Verwaltung von dynamischen und lokalisierten Inhalten in Anwendungen.
• Die <Branch>-Komponente ist äußerst flexibel und kann sich an verschiedene Bedingungen und Zustände anpassen.
• Die <Plural>-Komponente vereinfacht die Pluralisierung, indem sie automatisch die lokalspezifischen Regeln befolgt.
• Fügen Sie immer eine Fallback-children-Prop hinzu, um eine bessere Fehlerbehandlung und Benutzererfahrung zu gewährleisten.

Nächste Schritte

• Schauen Sie sich <Branch> und <Plural> in der API-Referenz für weitere Details an.
• Erfahren Sie mehr über Pluralisierungsregeln und Verzweigungslogik in den Unicode CLDR Pluralisierungsregeln.
• Entdecken Sie, wie Sie Variablen-Komponenten verwenden können.