# react-native: Branch
URL: https://generaltranslation.com/fr/docs/react-native/api/components/branch.mdx
---
title: Branch
description: Référence de l’API du composant Branch
---

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


## Présentation

Le composant `<Branch>` vous permet d’ajouter une logique conditionnelle à une traduction.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>
```

Vous passez une valeur au paramètre `branch`, puis celle-ci est associée à une valeur de sortie en fonction des clés que vous fournissez.


## Référence

### Props

<TypeTable
  type={{
  "branch": {
      description: 'Le nom de la branche à afficher.',
      type: 'chaîne de caractères',
      optional: false,
  },
  "children?": {
      description: 'Contenu de repli',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'chaîne de caractères',
      optional: true,
      default: 'undefined',
  },
  "[key]: string": {
      type: 'chaîne de caractères | JSX.Element',
      optional: false,
  },
}}
/>

La syntaxe `[key]: string` indique des clés arbitraires représentant des branches possibles.
Par exemple, des branches comme `active` et `inactive` peuvent être ajoutées comme paramètres.

| Prop            | Description                                                                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `branch`        | Le nom de la branche à afficher.                                                                                                                            |
| `children`      | Le contenu de repli à afficher si aucune branche correspondante n’est trouvée.                                                                              |
| `[key]: string` | Des branches représentant le contenu possible pour la valeur de branche donnée. Chaque clé correspond à une branche, et sa valeur est le contenu à afficher. |

### Valeur de retour

`JSX.Element` contenant le contenu correspondant à la branche spécifiée ou le contenu de repli.

### Lève une erreur

`Error` si la prop `branch` n’est pas fournie ou est invalide.

## Exemples

### Utilisation de base

`<Branch>` doit produire un rendu différent pour chaque valeur possible de la prop `branch`.

Dans cet exemple, la valeur `user.hairColor` est utilisée pour déterminer le rendu.
Nous avons défini les props `black`, `brown` et `blonde` pour correspondre aux valeurs possibles de `user.hairColor`.

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

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (vous pouvez passer une chaîne de caractères si vous le préférez)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenu de repli

La prop `children` est toujours utilisée comme contenu de repli si aucune prop ne correspond à la valeur passée à `branch`.

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

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}
```


### Traduire Branch

Si vous souhaitez traduire le contenu, encapsulez-le dans un composant `<T>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### Ajouter des variables

Si vous souhaitez afficher des valeurs dynamiques dans la branche, veillez à les entourer des composants `<Currency>`, `<DateTime>`, `<Num>` ou `<Var>`.

```jsx title="BranchExample.jsx" copy
import { Branch, T, Var } from 'gt-react-native';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

***


## Remarques

* Les clés des branches peuvent être n’importe quelle chaîne de caractères correspondant à la prop branch. Cette flexibilité permet d’adapter facilement `<Branch>` à un large éventail de cas d’usage.
* Combinez `<Branch>` avec d’autres composants, comme `<T>` pour les traductions et les [composants variables](/docs/react-native/guides/variables) pour le contenu dynamique, afin de créer des interfaces riches et localisées.

## Prochaines étapes

* Pour des cas d’usage et des exemples plus avancés, consultez [Utiliser les composants Branch](/docs/react-native/guides/branches).