Übersicht

Wir verwenden die Komponente <Plural>, um Sätze korrekt zu beugen. Denken Sie an den Unterschied zwischen den Sätzen: „Sie haben einen Artikel.“ und „Sie haben zwei Artikel.“

Im Englischen müssen Sie je nach Anzahl der Artikel zwei verschiedene Sätze definieren. In anderen Sprachen müssen Sie bis zu sechs definieren.

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 Verzweigungen der Pluralbildung abbilden. Zum Beispiel können Verzweigungen wie singular und plural als Parameter hinzugefügt werden.

Beschreibung

Rückgabewert

JSX.Element mit dem Inhalt, der der Pluralform von n entspricht, 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:in mit "en-US" arbeiten, verwenden Sie nur zwei: "singular" und "plural".
• Wenn Sie als Entwickler:in in "zh-CN" arbeiten, verwenden Sie nur "other".

Mehr zu den verschiedenen Formen finden Sie hier.

Beispiele

Grundlegende Verwendung

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

import { Plural } from 'gt-next';

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

Standardwerte

Sie können einen Standardwert angeben, falls der an n übergebene value keiner der vorhandenen Verzweigungen entspricht.

import { Plural } from 'gt-next';

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

Pluralformen übersetzen

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

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

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

Variablen hinzufügen

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

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

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

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> Element.} 
    plural={Sie haben <Num>{count}</Num> Elemente.} 
  />
</T>

Hinweise

• Die Komponente <Plural> wird zur Handhabung der Pluralbildung verwendet.
• 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>. Weitere Informationen zu Variablenkomponenten findest du hier.