# gt-react: General Translation React SDK: Branch
URL: https://generaltranslation.com/it/docs/react/api/components/branch.mdx
---
title: Branch
description: Riferimento API del componente Branch
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il modello in content/docs-templates/. */}


## Panoramica

Il componente `<Branch>` consente di aggiungere logica condizionale a una traduzione.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>L'utente è attivo.</p>}
    inactive={<p>L'utente non è attivo.</p>}
/>
```

Passi un valore al parametro `branch`, che viene quindi associato a un valore di output in base alle chiavi che fornisci.


## Guida di riferimento

### Props

<TypeTable
  type={{
  "branch": {
      description: 'Il nome del branch da visualizzare.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'Contenuto di fallback',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "[key]: string": {
      type: 'string | JSX.Element',
      optional: false,
  },
}}
/>

La sintassi `[key]: string` indica chiavi arbitrarie che rappresentano possibili branch.
Ad esempio, branch come `active` e `inactive` possono essere aggiunti come parametri.

| Prop            | Descrizione                                                                                                                                                                  |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `branch`        | Il nome del branch da visualizzare.                                                                                                                                          |
| `children`      | Contenuto di fallback da visualizzare se non viene trovato alcun branch corrispondente.                                                                                      |
| `[key]: string` | Branch che rappresentano i possibili contenuti per il valore di branch specificato. Ogni chiave corrisponde a un branch e il relativo valore è il contenuto da visualizzare. |

### Restituisce

`JSX.Element` contenente il contenuto corrispondente al branch specificato o il contenuto di fallback.

### Genera un&#39;eccezione

`Error` se la prop `branch` non è fornita o non è valida.

## Esempi

### Utilizzo di base

`<Branch>` deve avere un output diverso per ogni valore possibile della prop `branch`.

In questo esempio, il valore di `user.hairColor` viene usato per determinare l&#39;output.
Abbiamo definito le prop `black`, `brown` e `blonde` in modo che corrispondano ai possibili valori di `user.hairColor`.

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

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." // (puoi passare una stringa se preferisci)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenuto di fallback

I `children` verranno sempre usati come fallback se nessuna prop corrisponde al valore passato a `branch`.

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

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>
  );
}
```


### Traduzione di Branch

Se vuoi tradurre il contenuto, racchiudilo in un componente `<T>`.

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

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]
  );
}
```


### Aggiungere variabili

Se vuoi visualizzare valori dinamici nel branch, assicurati di racchiuderli nei componenti `<Currency>`, `<DateTime>`, `<Num>` o `<Var>`.

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

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>
  );
}
```

***


## Note

* Le chiavi per i branch possono essere qualsiasi valore stringa che corrisponda alla prop `branch`. Questa flessibilità rende semplice adattare `<Branch>` a un&#39;ampia gamma di casi d&#39;uso.
* Combina `<Branch>` con altri componenti, come `<T>` per le traduzioni e i [componenti variabili](/docs/react/guides/variables) per i contenuti dinamici, per creare interfacce ricche e localizzate.

## Passaggi successivi

* Per casi d&#39;uso ed esempi più avanzati, consulta [Using Branching Components](/docs/react/guides/branches).