Vue d’ensemble

Nous utilisons le composant <Plural> pour gérer la flexion des phrases selon le nombre. Pensez à la différence entre : « You have one item. » et « You have two items. »

En anglais, il faut définir deux phrases distinctes 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 de pluralisation potentielles. Par exemple, des branches comme singular et plural peuvent être ajoutées en paramètres.

Description

Renvoie

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 de votre langue.

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

• Si vous êtes développeur et que vous 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 élément.}
      plural={Vous avez plusieurs éléments.}
    />
  );
}

Secours

Vous pouvez fournir 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={Vous avez un article.}
    >
      Vous avez plusieurs articles. // [!code highlight]
    </Plural>
  );
}

Traduction des pluriels

Pour traduire, il suffit d’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 des éléments.} 
    />
  );
}

Ajout de variables

Et si nous voulions ajouter des variables à la phrase plurielle ?

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

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

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 plurielles disponibles (p. ex. one, other, few, many) dépendent du locale et suivent les règles de pluralisation du CLDR d’Unicode.

Prochaines étapes

• Pour plus d’exemples, consultez la documentation de référence sur les composants à embranchements ici.
• Pour des cas d’usage plus avancés, combinez <Plural> avec des composants variables comme <Currency>, <DateTime>, <Num> et <Var>. En savoir plus sur les composants variables ici.