Aperçu

Nous utilisons le composant <Plural> pour gérer la pluralisation des phrases. Considérez la différence entre : « You have one item. » et « You have two items. »

En anglais, il faut définir deux phrases différentes selon le nombre d’éléments. Dans d’autres langues, il peut y en avoir 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 en tant que paramètres.

Description

Renvoie

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

Lève

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

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

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

Traduction des pluriels

Pour traduire, il suffit d’ajouter le composant <T>.

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

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

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

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

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

Dans un composant <T>, enveloppez tout contenu dynamique dans un <Currency>, <DateTime>, <Num> ou <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 (par exemple one, other, few, many) dépendent du locale et suivent les règles de pluralisation Unicode CLDR.

Prochaines étapes

• Pour voir d’autres exemples, consultez la page de référence sur les composants de branchement 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.