<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 élément." et "Vous avez deux éléments."

En anglais, vous devez définir deux phrases différentes basées sur le nombre d'éléments. 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 de pluralisation potentielles. Par exemple, des branches comme singular et plural peuvent être ajoutées comme paramètres.

Description

Retourne

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 devez uniquement utiliser les formes plurielles de 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 seulement "other".

En savoir 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={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 n'aurait pas de branches correspondantes.

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!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={You have an item.} 
      plural={You have some items.} 
    />
  );
}

Ajouter des variables

Que faire si nous voulons ajouter des variables à la phrase pluralisée ?

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

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>, enveloppez 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 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 la documentation 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>. En savoir plus sur les composants variables ici.

Pour une exploration plus approfondie de la pluralisation et du branchement, visitez Utilisation des composants de branchement.