<Plural>

Aperçu

Nous utilisons le composant <Plural> pour gérer la conjugaison des phrases. Pensez à la différence entre les phrases : « Vous avez un article. » et « Vous avez deux articles. »

En anglais, vous devez définir deux phrases différentes selon le nombre d'articles. Dans d'autres langues, il faut en définir jusqu'à six.

const count = 1;
<Plural n={count}
  singular={You have one item.}
  plural={You have some items.}
/>

Référence

Props

La syntaxe [key]: string indique des clés arbitraires représentant des branches potentielles de pluralisation. Par exemple, des branches comme singular et plural peuvent être ajoutées en tant que paramètres.

Description

Retourne

JSX.Element contenant le contenu correspondant à la forme plurielle de n, ou le contenu de secours.

Exceptions

Error si n n'est pas fourni ou n'est pas un nombre valide.

Quelles formes dois-je ajouter ?

Vous n'avez besoin d'utiliser que les formes plurielles dans votre langue.

Les formes possibles sont : "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other".

• Si vous êtes un développeur utilisant "en-US", utilisez seulement deux formes : "singular" et "plural".
• Si vous êtes un développeur en "zh-CN", utilisez uniquement "other".

Lisez-en plus sur les différentes formes ici.

Exemples

Utilisation de base

Utilisez le composant <Plural> pour gérer la pluralisation.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={You have one item.}
      plural={You have some items.}
    />
  );
}

Valeurs de repli

Vous pouvez fournir une valeur de repli au cas où la valeur passée à n ne correspond à aucune branche.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}

Traduction des pluriels

Tout ce que vous avez à faire pour traduire, c'est d'ajouter le composant <T>.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={You have an item.} 
      plural={You have some items.} 
    />
  );
}

Ajout de variables

Que faire si nous voulons ajouter des variables à la phrase plurielle ?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have <Num>{count}</Num> item.} 
      plural={You have <Num>{count}</Num> items.} 
    />
  );
}

Lorsque vous êtes à l'intérieur d'un composant <T>, entourez tout contenu dynamique avec un <Currency>, <DateTime>, <Num>, ou <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={You have <Num>{count}</Num> item.} 
    plural={You have <Num>{count}</Num> items.} 
  />
</T>

Notes

• Le composant <Plural> est utilisé pour gérer la pluralisation.
• Les branches de pluriel disponibles (par exemple, one, other, few, many) dépendent de la langue et suivent les règles de pluralisation Unicode CLDR.

Prochaines étapes

• Pour plus d'exemples, consultez la documentation de référence sur les composants de branchement ici.
• Pour une utilisation plus avancée, combinez <Plural> avec des composants de variable comme <Currency>, <DateTime>, <Num> et <Var>. En savoir plus sur les composants de variable ici.

Pour approfondir la pluralisation et le branchement, visitez Utilisation des composants de branchement.