Überblick

Wir verwenden die <Plural>-Komponente, um Sätze korrekt zu beugen. Denken Sie an den Unterschied zwischen den Sätzen: „You have one item.“ und „You have two items.“

Im Englischen müssen Sie je nach Anzahl der Elemente zwei unterschiedliche Sätze definieren. In anderen Sprachen sind es bis zu sechs.

const count = 1;
<Plural n={count}
  singular={Sie haben ein Element.}
  plural={Sie haben einige Elemente.}
/>

Referenzen

Props

Die Syntax [key]: string steht für beliebige Schlüssel, die mögliche Zweige der Pluralbildung darstellen. Zum Beispiel können Zweige wie singular und plural als Parameter hinzugefügt werden.

Beschreibung

Rückgabe

JSX.Element mit dem Inhalt für die Pluralform von n oder dem Standardwert.

Ausnahmen

Error, wenn n nicht angegeben ist oder keine gültige Zahl ist.

Welche Formen sollte ich hinzufügen?

Sie müssen nur die Pluralformen Ihrer Sprache verwenden.

Die möglichen Formen sind: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other".

• Wenn Sie als Entwickler "en-US" verwenden, nutzen Sie nur zwei: "singular" und "plural".
• Wenn Sie als Entwickler in "zh-CN" arbeiten, verwenden Sie nur "other".

Weitere Informationen zu den verschiedenen Formen finden Sie hier.

Beispiele

Grundlegende Verwendung

Verwenden Sie die <Plural>-Komponente, um die Pluralbildung zu behandeln.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={Sie haben ein Element.}
      plural={Sie haben mehrere Elemente.}
    />
  );
}

Standardwerte

Sie können einen Standardwert angeben, falls der an n übergebene value zu keinem Zweig passt.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Sie haben ein Element.}
    >
      Sie haben mehrere Elemente. // [!code highlight]
    </Plural>
  );
}

Pluralformen übersetzen

Alles, was Sie zum Übersetzen tun müssen, ist, die Komponente <T> hinzuzufügen.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={Sie haben einen Eintrag.} 
      plural={Sie haben mehrere Einträge.} 
    />
  );
}

Variablen hinzufügen

Was ist, wenn wir dem pluralisierten Satz ein paar Variablen hinzufügen möchten?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Sie haben <Num>{count}</Num> Element.} 
      plural={Sie haben <Num>{count}</Num> Elemente.} 
    />
  );
}

Innerhalb einer <T>-Komponente sollten alle dynamischen Inhalte mit <Currency>, <DateTime>, <Num> oder <Var> umschlossen werden.

<T id="itemCount">
  <Plural n={count}
    singular={Sie haben <Num>{count}</Num> Artikel.} 
    plural={Sie haben <Num>{count}</Num> Artikel.} 
  />
</T>

Hinweise

• Die Komponente <Plural> wird verwendet, um die Pluralbildung zu steuern.
• Die verfügbaren Pluralzweige (z. B. one, other, few, many) hängen von der locale ab und folgen den Unicode‑CLDR‑Regeln zur Pluralbildung.

Nächste Schritte

• Weitere Beispiele findest du in der Referenzdokumentation zu verzweigenden Komponenten hier.
• Für fortgeschrittene Anwendungsfälle kombiniere Plural mit Variablenkomponenten wie <Currency>, <DateTime>, <Num> und <Var>. Mehr über Variablenkomponenten erfährst du hier.