<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 en fonction du nombre d'articles. Dans d'autres langues, vous devez 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

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 devrais-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 : "singular" et "plural".
• Si vous êtes un développeur en "zh-CN", utilisez seulement "other".

Lisez plus sur les différentes formes ici.

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 quelques articles.}
    />
  );
}

Alternatives

Vous pouvez fournir une alternative au cas où la valeur passée à n n'a pas de branches correspondantes.

import { Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Vous avez un article.}
    >
      Vous avez quelques articles. // [!code highlight]
    </Plural>
  );
}

Traduire les pluriels

Tout ce que vous avez à faire pour traduire, c'est 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 article.} 
      plural={Vous avez quelques articles.} 
    />
  );
}

Ajouter des variables

Que faire si nous voulons 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> article.} 
      plural={Vous avez <Num>{count}</Num> articles.} 
    />
  );
}

Lorsqu'il est à l'intérieur d'un composant <T>, enveloppez tout contenu dynamique avec 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 (par exemple, one, other, few, many) dépendent de la locale et suivent les règles de pluralisation Unicode CLDR.

Prochaines étapes

• Pour plus d'exemples, consultez le document de référence sur les composants de branchement ici.
• Pour une utilisation plus avancée, combinez <Plural> avec des composants variables comme <Currency>, <DateTime>, <Num>, et <Var>. Lisez plus sur les composants variables ici.

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