Vue d’ensemble

Nous utilisons le composant <Plural> pour gérer la pluralisation des phrases. Pensez à la différence entre : "Vous avez un article." et "Vous avez deux articles."

En anglais, il faut définir deux phrases différentes selon le nombre d’articles. Dans d’autres langues, il peut y en avoir jusqu’à six.

const count = 1;
<Plural n={count}
  singular={Vous avez un élément.}
  plural={Vous avez plusieurs éléments.}
/>

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

Description

Renvoie

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

Déclenche

Error si n n’est pas fourni ou n’est pas un nombre valide.

Quelles formes dois-je ajouter ?

N’utilisez que les formes plurielles propres à 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", utilisez uniquement 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 plusieurs articles.}
    />
  );
}

Valeurs de secours

Vous pouvez fournir une valeur de secours si la valeur 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 plusieurs articles. // [!code highlight]
    </Plural>
  );
}

Traduction des pluriels

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

Ajout de variables

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

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

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>, enveloppez tout contenu dynamique dans un <Currency>, un <DateTime>, un <Num> ou un <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={Vous avez <Num>{count}</Num> élément.} 
    plural={Vous avez <Num>{count}</Num> éléments.} 
  />
</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 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 à branches ici.
• Pour des cas d’utilisation plus avancés, combinez <Plural> avec des composants de variables comme <Currency>, <DateTime>, <Num> et <Var>. Pour en savoir plus sur les composants de variables, rendez-vous ici.