Überblick

Wir verwenden die Komponente <Plural>, 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 abhängig von der Anzahl der Elemente zwei unterschiedliche Sätze definieren. In anderen Sprachen können es bis zu sechs sein.

const count = 1;
<Plural n={count}
  singular={Sie haben einen Artikel.}
  plural={Sie haben einige Artikel.}
/>

Referenzen

Props

Die Syntax [key]: string bezeichnet beliebige Schlüssel, die potenzielle Pluralbildungszweige darstellen. Zum Beispiel können Zweige wie singular und plural als Parameter hinzugefügt werden.

Beschreibung

Gibt zurück

JSX.Element mit dem Inhalt, der der Pluralform von n entspricht, oder dem Standardwert.

Ausnahmen

Error, wenn n nicht angegeben 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 mit "en-US" arbeiten, verwenden Sie nur zwei: "singular" und "plural".
• Wenn Sie als Entwickler mit "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 steuern.

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 Wert keiner verfügbaren Verzweigung entspricht.

import { Plural } from 'gt-next';

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

Pluralformen übersetzen

Zum Übersetzen müssen Sie nur die Komponente <T> hinzufügen.

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

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

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 Sie alle dynamischen Inhalte mit <Currency>, <DateTime>, <Num> oder <Var> umschließen.

<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 Behandlung der Pluralbildung verwendet.
• Die verfügbaren Pluralfälle (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 zu verzweigenden Komponenten hier.
• Für fortgeschrittene Nutzung kombinieren Sie <Plural> mit Variablenkomponenten wie <Currency>, <DateTime>, <Num> und <Var>. Mehr über Variablenkomponenten erfahren Sie hier.