Vue d’ensemble

Nous utilisons le composant <Plural> pour gérer les formes plurielles dans les phrases. Pensez à la différence entre les phrases : « You have one item. » et « You have two items. »

En anglais, vous devez définir deux phrases différentes selon le nombre d’éléments. Dans d’autres langues, vous devez en définir jusqu’à six.

const count = 1;
<Plural n={count}
  singular={Vous avez un article.}
  plural={Vous avez plusieurs articles.}
/>

Références

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 comme paramètres.

Description

Renvoie

Un 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 du pluriel propres à votre langue.

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

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

Pour en savoir plus sur les différentes formes, consultez cette page.

Exemples

Utilisation de base

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

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={Vous avez un article.}
      plural={Vous avez des articles.}
    />
  );
}

Secours

Vous pouvez définir un secours si la value passée à n ne correspond à aucune branche.

import { Plural } from 'gt-next';

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

Traduction des pluriels

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

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={Vous avez un élément.} 
      plural={Vous avez plusieurs éléments.} 
    />
  );
}

Ajout de variables

Et si l’on souhaite ajouter des variables à la phrase au pluriel ?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Vous avez <Num>{count}</Num> élément.} 
      plural={Vous avez <Num>{count}</Num> éléments.} 
    />
  );
}

À l’intérieur d’un composant <T>, entourez tout contenu dynamique d’un <Currency>, d’un <DateTime>, d’un <Num> ou d’un <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={Vous avez <Num>{count}</Num> article.} 
    plural={Vous avez <Num>{count}</Num> articles.} 
  />
</T>

Notes

• Le composant <Plural> est utilisé pour gérer la pluralisation.
• Les branches de pluriel disponibles (p. ex. one, other, few, many) dépendent du locale 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 à branches ici.
• Pour des cas d’usage plus avancés, combinez <Plural> avec des composants de variables comme <Currency>, <DateTime>, <Num> et <Var>. En savoir plus sur les composants de variables ici.