Überblick

Wir verwenden die <Plural>-Komponente, um Sätze je nach Zahlform korrekt zu bilden. 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 zwei verschiedene 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 mehrere Elemente.}
/>

Referenzen

Props

Die Syntax [key]: string bezeichnet beliebige Schlüssel, die potenzielle Zweige der Pluralbildung darstellen. Zum Beispiel können Zweige 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?

Verwenden Sie nur die Pluralformen Ihrer Sprache.

Mögliche 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".

Weitere Informationen zu den verschiedenen Formen finden Sie hier.

Beispiele

Grundlegende Verwendung

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

import { Plural } from 'gt-react';

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

Standardwerte

Sie können einen Standardwert angeben, falls der an n übergebene Wert keinem passenden Zweig entspricht.

import { Plural } from 'gt-react';

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-react';

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

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

Hinweise

• Die <Plural>-Komponente wird zur Behandlung 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 finden Sie in der Referenz zur Verzweigung von Komponenten hier.
• Für fortgeschrittene Anwendungsfälle kombinieren Sie <Plural> mit Variablenkomponenten wie <Currency>, <DateTime>, <Num> und <Var>. Mehr über Variablenkomponenten erfahren Sie hier.