# react-native: Plural
URL: https://generaltranslation.com/fr/docs/react-native/api/components/plural.mdx
---
title: Plural
description: Référence d’API du composant Plural
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Nous utilisons le composant `<Plural>` pour gérer l’accord des phrases.
Pensez à la différence entre les phrases : &quot;Vous avez un élément.&quot; et &quot;Vous avez deux éléments.&quot;

En anglais, vous devez définir deux phrases différentes selon le nombre d’éléments.
Dans d’autres langues, vous devez en définir jusqu’à six.

```jsx
const count = 1;
<Plural n={count}
  one={You have one item.}
  other={You have some items.}
/>
```


## Référence

### Propriétés

<TypeTable
  type={{
  "n": {
    description: 'Le nombre utilisé pour déterminer la forme du pluriel.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: 'Valeur de repli si aucune forme plurielle ne correspond',
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

La syntaxe `[key]: string` indique des clés arbitraires représentant des branches de pluralisation possibles.
Par exemple, vous pouvez ajouter comme paramètres des branches telles que `singular` et `plural`.

### Description

| Nom de la prop  | Description                                                                                                                                                                                                                                                                                                                                                                               |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`             | Le nombre utilisé pour déterminer la forme du pluriel. Cette prop est requise pour la pluralisation.                                                                                                                                                                                                                                                                                      |
| `children`      | Contenu de repli affiché si aucune branche de pluriel correspondante n’est trouvée.                                                                                                                                                                                                                                                                                                       |
| `locales`       | Les paramètres régionaux facultatifs permettent de spécifier le paramètre régional de formatage. S’il n’est pas fourni, le paramètre régional par défaut de l’utilisateur est utilisé. Pour en savoir plus sur la spécification des paramètres régionaux, consultez [cette page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |
| `[key]: string` | Branches représentant les formes du pluriel. Les branches exactes dépendent du paramètre régional.                                                                                                                                                                                                                                                                                        |

### Renvoie

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

### Lève une erreur

`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 du pluriel 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"`, n’en utilisez que deux : `"singular"` et `"plural"`.
* Si vous êtes un développeur utilisant `"zh-CN"`, utilisez uniquement `"other"`.

Pour en savoir plus sur les différentes formes, consultez [cette page](https://cldr.unicode.org/index/cldr-spec/plural-rules).

***

## Exemples

### Utilisation de base

Utilisez le composant `<Plural>` pour gérer le pluriel.

```jsx title="BasicExample.jsx" copy
import { Plural } from 'gt-react-native';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} // [!code highlight]
      one={You have one item.}
      other={You have some items.}
    />
  );
}
```


### Valeurs de repli

Vous pouvez définir une valeur de repli si la valeur passée à `n` ne correspond à aucune branche.

```jsx title="FallbackExample.jsx" copy
import { Plural } from 'gt-react-native';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}
```


### Traduction des pluriels

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

```jsx title="PluralExample.jsx" copy
import { T, Plural } from 'gt-react-native';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      one={You have an item.} // [!code highlight]
      other={You have some items.} // [!code highlight]
    />
  );
}
```


### Ajouter des variables

Que faire si vous voulez ajouter des variables à la phrase au pluriel ?

```jsx title="PluralExample.jsx" copy
import { T, Plural, Num } from 'gt-react-native';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={You have <Num>{count}</Num> item.} // [!code highlight]
      other={You have <Num>{count}</Num> items.} // [!code highlight]
    />
  );
}
```

À l’intérieur d’un composant `<T>`, enveloppez tout contenu dynamique dans `<Currency>`, `<DateTime>`, `<Num>` ou `<Var>`.

```jsx
<T id="itemCount">
  <Plural n={count}
    one={You have <Num>{count}</Num> item.} // [!code highlight]
    other={You have <Num>{count}</Num> items.} // [!code highlight]
  />
</T>
```

***


## Remarques

* Le composant `<Plural>` est utilisé pour gérer le pluriel.
* Les formes du pluriel disponibles (par exemple, one, other, few, many) dépendent du paramètre régional et suivent les [règles de pluralisation Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).

## Étapes suivantes

* Pour plus d’exemples, consultez la documentation de référence sur [l’utilisation des composants de branchement](/docs/react-native/guides/branches).
* Pour des usages plus avancés, combinez `<Plural>` avec des composants variables comme `<Currency>`, `<DateTime>`, `<Num>` et `<Var>`. Pour en savoir plus, consultez [l’utilisation des composants variables](/docs/react-native/guides/variables).