# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestion des pluriels et des branches
URL: https://generaltranslation.com/fr/docs/react/guides/handling-plurals-and-branches.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment gérer la pluralisation React et le contenu traduit conditionnel avec `<Plural>` et `<Branch>`.

Les paramètres régionaux utilisent différentes formes du pluriel : l’anglais utilise généralement `one` et `other`, tandis que certaines langues nécessitent des formes supplémentaires.

Utilisez [`<Plural>`](/docs/react/reference/components/plural) pour les formulations dépendant d’un nombre et [`<Branch>`](/docs/react/reference/components/branch) pour les autres contenus conditionnels.

## Choisir entre pluriels et branches [#choose]

* Utilisez [`<Plural>`](/docs/react/reference/components/plural) lorsqu’un nombre détermine la formulation, par exemple pour le nombre de messages ou les résultats de recherche.
* Utilisez [`<Branch>`](/docs/react/reference/components/branch) lorsqu’un état, un plan, une valeur booléenne ou une autre valeur détermine le contenu.
* Placez l’un ou l’autre de ces composants dans [`<T>`](/docs/react/reference/components/t) afin que chaque variante puisse être traduite.
* Encapsulez les valeurs dynamiques de chaque variante dans un [composant variable](/docs/react/guides/formatting-variables), tel que [`<Num>`](/docs/react/reference/components/num) ou [`<Var>`](/docs/react/reference/components/var).

Les deux composants fonctionnent de la même manière dans React, Next.js, TanStack Start et React Native. Seul le paquet à importer diffère.

## Gérer le pluriel avec `<Plural>` [#plural]

Ne construisez pas les pluriels en vérifiant `count === 1` ou en ajoutant un `s` ; cela ne modélise que la grammaire anglaise. Passez le nombre via [`n`](/docs/react/reference/components/plural#n), puis fournissez les formes utilisées par votre langue source. [`<Plural>`](/docs/react/reference/components/plural) sélectionne la forme appropriée selon les [règles de pluriel Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) du paramètre régional actif.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

Indiquez les [`catégories de pluriel`](/docs/react/reference/components/plural#form) utilisées par votre langue source — généralement `one` et `other` pour l’anglais. Les traducteurs fournissent les catégories requises par chaque langue cible, qui peuvent inclure `zero`, `two`, `few` et `many`.

Si la catégorie exacte n’est pas disponible, [`<Plural>`](/docs/react/reference/components/plural) utilise la branche `plural`, puis `other`. L’[`élément enfant`](/docs/react/reference/components/plural#children) ne s’affiche que lorsqu’aucune des deux branches génériques n’existe :

```tsx
<T>
  <Plural n={count} one={<>One result</>}>
    <Num>{count}</Num> results
  </Plural>
</T>;
```

## Effectuer une branche selon une valeur avec `<Branch>` [#branch]

Utilisez [`<Branch>`](/docs/react/reference/components/branch) lorsque le contenu dépend d’une valeur autre qu’un décompte. Passez la valeur via [`branch`](/docs/react/reference/components/branch#branch), ajoutez une [prop pour chaque valeur attendue](/docs/react/reference/components/branch#value) et utilisez [`élément enfant`](/docs/react/reference/components/branch#children) comme contenu de secours.

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

Chaque branche est traduite indépendamment, afin que les traducteurs puissent adapter l’intégralité de sa formulation plutôt que de composer avec une condition JavaScript inline.

### Remplacer les conditions à l’intérieur de `<T>`

Un opérateur ternaire inline rend l’élément enfant de [`<T>`](/docs/react/reference/components/t) dynamique et empêche une extraction fiable. Représentez la même condition avec [`<Branch>`](/docs/react/reference/components/branch) :

```tsx
// ❌ Conditionnelle inline
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Branches traduisibles
<T>
  <Branch branch={isActive} true="Active">
    Inactive
  </Branch>
</T>;
```

*Remarque : [`<Branch>`](/docs/react/reference/components/branch) ignore les attributs `data-*`, car les props non réservées représentent des valeurs de branche. Placez les identifiants de test et les autres attributs de données sur un élément englobant ; la règle de lint [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) signale cette erreur.*

## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.