# gt-react: General Translation React SDK: Composants de branchement conditionnel
URL: https://generaltranslation.com/fr/docs/react/guides/branches.mdx
---
title: Composants de branchement conditionnel
description: Comment utiliser les composants de branchement conditionnel pour gérer du contenu conditionnel dans les traductions
---

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

Les composants de branchement permettent d’afficher du contenu de manière conditionnelle dans les composants [`<T>`](/docs/react/api/components/t). Ils gèrent la logique dynamique, comme les conditions if/else et les règles de pluralisation, tout en garantissant que toutes les variantes de contenu peuvent être traduites correctement.


## Composants disponibles

* [`<Branch>`](/docs/react/api/components/branch) : Affiche du contenu conditionnel selon des valeurs ou des états
* [`<Plural>`](/docs/react/api/components/plural) : Pluralisation automatique à l’aide de règles propres au paramètre régional

## Démarrage rapide

Les composants de branchement s’utilisent dans [`<T>`](/docs/react/api/components/t) pour gérer la logique conditionnelle :

```jsx
import { T, Branch, Plural, Num, Var } from 'gt-react';

function NotificationPanel({ user, messageCount }) {
  return (
    <T>
      <Branch 
        branch={user.status}
        online={<p><Var>{user.name}</Var> is currently online</p>}
        away={<p><Var>{user.name}</Var> is away</p>}
      >
        <p><Var>{user.name}</Var> status unknown</p>
      </Branch>
      
      <Plural
        n={messageCount}
        one={<p>You have <Num>{messageCount}</Num> message</p>}
        other={<p>You have <Num>{messageCount}</Num> messages</p>}
      />
    </T>
  );
}
```


## Comment fonctionnent les composants de branchement

Les composants de branchement gèrent le rendu conditionnel dans les traductions en :

1. **Remplaçant les opérateurs ternaires** et la logique conditionnelle dans [`<T>`](/docs/react/api/components/t)
2. **Fournissant un contenu de remplacement** lorsque les conditions ne correspondent pas aux valeurs attendues
3. **Permettant de traduire** toutes les variantes de contenu possibles
4. **Appliquant automatiquement les règles du paramètre régional** pour la pluralisation

```jsx
// ❌ Ceci ne fonctionne pas - logique conditionnelle dans <T>
<T><p>{isActive ? 'User is active' : 'User is inactive'}</p></T>

// ✅ Ceci fonctionne - logique conditionnelle avec branchement
<T>
  <Branch 
    branch={isActive} 
    true={<p>User is active</p>}
    false={<p>User is inactive</p>}
  />
</T>
```

## Guide des composants

### Branch - Contenu conditionnel

Utilisez [`<Branch>`](/docs/react/api/components/branch) pour tout rendu conditionnel en fonction de valeurs ou d’états :

```jsx
// Affichage du statut utilisateur
<T>
  <Branch 
    branch={user.role}
    admin={<p>Administrator Dashboard</p>}
    user={<p>User Dashboard</p>}
    guest={<p>Guest Access</p>}
  >
    <p>Access level unknown</p>
  </Branch>
</T>

// Conditions booléennes
<T>
  <Branch 
    branch={isLoggedIn}
    true={<p>Welcome back!</p>}
    false={<p>Please log in</p>}
  />
</T>

// Niveaux d'abonnement
<T>
  <Branch
    branch={subscription.tier}
    free={<p>Upgrade to unlock premium features</p>}
    premium={<p>Enjoy your premium experience</p>}
    enterprise={<p>Contact support for enterprise solutions</p>}
  >
    <p>Subscription status unavailable</p>
  </Branch>
</T>
```


### Pluriel - Gestion intelligente du pluriel

Utilisez [`<Plural>`](/docs/react/api/components/plural) pour le contenu qui varie selon la quantité :

```jsx
// Pluralisation de base
<T>
  <Plural
    n={itemCount}
    one={<p><Num>{itemCount}</Num> item in cart</p>}
    other={<p><Num>{itemCount}</Num> items in cart</p>}
  />
</T>

// Gestion du zéro
<T>
  <Plural
    n={notifications}
    zero={<p>No new notifications</p>}
    one={<p><Num>{notifications}</Num> notification</p>}
    other={<p><Num>{notifications}</Num> notifications</p>}
  />
</T>

// Pluralisation complexe (suit les règles Unicode CLDR)
<T>
  <Plural
    n={days}
    zero={<p>Due today</p>}
    one={<p>Due in <Num>{days}</Num> day</p>}
    few={<p>Due in <Num>{days}</Num> days</p>}
    many={<p>Due in <Num>{days}</Num> days</p>}
    other={<p>Due in <Num>{days}</Num> days</p>}
  />
</T>
```


### Combiner avec des composants variables

Les composants de branchement et les composants variables fonctionnent parfaitement ensemble :

```jsx
<T>
  <Branch
    branch={order.status}
    pending={
      <p>
        Order <Var>{order.id}</Var> is pending. 
        Total: <Currency currency="USD">{order.total}</Currency>
      </p>
    }
    shipped={
      <p>
        Order <Var>{order.id}</Var> shipped on <DateTime>{order.shippedDate}</DateTime>
      </p>
    }
    delivered={
      <p>Order <Var>{order.id}</Var> was delivered successfully</p>
    }
  >
    <p>Order status unknown</p>
  </Branch>
</T>
```


## Quand utiliser les composants de branchement

### Remplacez les opérateurs ternaires

Convertissez la logique conditionnelle afin de l’utiliser dans [`<T>`](/docs/react/api/components/t) :

```jsx
// ❌ Impossible d'utiliser un ternaire dans <T>
<T>{isActive ? <p>Active user</p> : <p>Inactive user</p>}</T>

// ✅ Utilisez Branch à la place
<T>
  <Branch 
    branch={isActive}
    true={<p>Active user</p>}
    false={<p>Inactive user</p>}
  />
</T>
```


### Gérer des conditions multiples

Remplacez les instructions `switch` ou les suites de conditions `if/else` :

```jsx
// ❌ Logique conditionnelle complexe
<T>
  {status === 'loading' ? <p>Loading...</p> : 
   status === 'error' ? <p>Error occurred</p> : 
   status === 'success' ? <p>Success!</p> : 
   <p>Unknown status</p>}
</T>

// ✅ Logique de branchement claire
<T>
  <Branch
    branch={status}
    loading={<p>Loading...</p>}
    error={<p>Error occurred</p>}
    success={<p>Success!</p>}
  >
    <p>Unknown status</p>
  </Branch>
</T>
```


### Règles de pluriel

Remplacez la gestion manuelle des pluriels :

```jsx
// ❌ Pluralisation manuelle
<T>{count === 1 ? <p>1 item</p> : <p>{count} items</p>}</T>

// ✅ Pluralisation automatique
<T>
  <Plural
    n={count}
    one={<p><Num>{count}</Num> item</p>}
    other={<p><Num>{count}</Num> items</p>}
  />
</T>
```


## Utilisation autonome

Les composants de branchement peuvent être utilisés en dehors de [`<T>`](/docs/react/api/components/t) pour de la logique pure, sans traduction :

```jsx
// Rendu conditionnel pur
<Branch
  branch={theme}
  dark={<DarkModeIcon />}
  light={<LightModeIcon />}
>
  <DefaultIcon />
</Branch>

// Pluralisation pure
<Plural
  n={count}
  one={<SingleItemComponent />}
  other={<MultipleItemsComponent />}
/>
```


## Problèmes fréquents

### Clés de branche manquantes

Fournissez toujours un contenu de remplacement pour les valeurs sans correspondance :

```jsx
// ❌ Aucun fallback pour les valeurs inattendues
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
  // Et si userRole est "moderator" ?
/>

// ✅ Toujours inclure un fallback
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
>
  <DefaultPanel /> {/* Fallback pour toute autre valeur */}
</Branch>
```


### Formes du pluriel incomplètes

Fournissez les formes du pluriel nécessaires pour votre paramètre régional par défaut :

```jsx
// ❌ Forme "other" manquante
<Plural
  n={count}
  one={<p>1 item</p>}
  // Et pour 0, 2, 3, etc. ?
/>

// ✅ Inclure les formes nécessaires
<Plural
  n={count}
  zero={<p>No items</p>}
  one={<p>1 item</p>}
  other={<p>{count} items</p>}
/>
```


### Logique imbriquée complexe

Bien que cela fonctionne, nous vous recommandons de garder une logique conditionnelle simple et d’éviter les imbrications trop profondes :

```jsx
// ❌ Imbrication complexe
<Branch branch={status}>
  <Branch branch={subStatus}>
    {/* Difficile à lire et à maintenir */}
  </Branch>
</Branch>

// ✅ Aplatir la logique ou utiliser plusieurs composants
<Branch
  branch={`${status}-${subStatus}`}
  active-online={<ActiveOnline />}
  active-offline={<ActiveOffline />}
  inactive-online={<InactiveOnline />}
>
  <DefaultState />
</Branch>
```

<Callout>
  Pour en savoir plus sur les règles de pluriel, consultez la [documentation CLDR d’Unicode](https://cldr.unicode.org/index/cldr-spec/plural-rules).
</Callout>


## Étapes suivantes

* [Guide de traduction des chaînes](/docs/react/guides/strings) - Traduisez du texte brut sans JSX
* [Guide du contenu dynamique](/docs/key-concepts/dynamic-content) - Gérez la traduction en exécution
* Références API :
  * [Composant `<Branch>`](/docs/react/api/components/branch)