# gt-next: General Translation Next.js SDK: Componenti di branching
URL: https://generaltranslation.com/it/docs/next/guides/branches.mdx
---
title: Componenti di branching
description: Come usare i componenti di branching per gestire contenuti condizionali nelle traduzioni
---

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

I componenti di branching consentono il rendering condizionale dei contenuti all&#39;interno dei componenti [`<T>`](/docs/next/api/components/t). Gestiscono logiche dinamiche come le istruzioni if/else e le regole di pluralizzazione, assicurando al contempo che tutte le possibili varianti del contenuto possano essere tradotte correttamente.


## Componenti disponibili

* [`<Branch>`](/docs/next/api/components/branch): Contenuti condizionali in base a valori o stati
* [`<Plural>`](/docs/next/api/components/plural): Pluralizzazione automatica tramite regole specifiche dell&#39;impostazione regionale

## Guida rapida

I componenti di branching funzionano all&#39;interno di [`<T>`](/docs/next/api/components/t) per gestire la logica condizionale:

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

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


## Come funzionano i componenti di branching

I componenti di branching gestiscono il rendering condizionale all&#39;interno delle traduzioni:

1. **Sostituendo gli operatori ternari** e la logica condizionale all&#39;interno di [`<T>`](/docs/next/api/components/t)
2. **Fornendo contenuto di fallback** quando le condizioni non corrispondono ai valori previsti
3. **Consentendo la traduzione** di tutte le possibili varianti di contenuto
4. **Applicando automaticamente le regole di pluralizzazione dell&#39;impostazione regionale**

```jsx
// ❌ Questo non funziona - logica condizionale in <T>
<T><p>{isActive ? 'User is active' : 'User is inactive'}</p></T>

// ✅ Questo funziona - logica condizionale con branching
<T>
  <Branch 
    branch={isActive} 
    true={<p>User is active</p>}
    false={<p>User is inactive</p>}
  />
</T>
```


## Guida ai componenti

### Branch - Contenuto condizionale

Usa [`<Branch>`](/docs/next/api/components/branch) per qualsiasi rendering condizionale in base a valori o stati:

```jsx
// Visualizzazione stato utente
<T>
  <Branch 
    branch={user.role}
    admin={<p>Dashboard amministratore</p>}
    user={<p>Dashboard utente</p>}
    guest={<p>Accesso ospite</p>}
  >
    <p>Livello di accesso sconosciuto</p>
  </Branch>
</T>

// Condizioni booleane
<T>
  <Branch 
    branch={isLoggedIn}
    true={<p>Bentornato!</p>}
    false={<p>Effettua il login</p>}
  />
</T>

// Livelli di abbonamento
<T>
  <Branch
    branch={subscription.tier}
    free={<p>Esegui l'upgrade per sbloccare le funzionalità premium</p>}
    premium={<p>Goditi la tua esperienza premium</p>}
    enterprise={<p>Contatta il supporto per soluzioni enterprise</p>}
  >
    <p>Stato abbonamento non disponibile</p>
  </Branch>
</T>
```


### Plurale - Gestione intelligente del plurale

Usa [`<Plural>`](/docs/next/api/components/plural) per i contenuti che cambiano in base alla quantità:

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

// Gestione dello zero
<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>

// Pluralizzazione complessa (segue le regole 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>
```

### In combinazione con i componenti variabili

Il branching e i componenti variabili funzionano perfettamente insieme:

```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>
```


## Quando usare i componenti di branching

### Sostituisci gli operatori ternari

Adatta la logica condizionale per usarla all&#39;interno di [`<T>`](/docs/next/api/components/t):

```jsx
// ❌ Non è possibile usare l'operatore ternario in <T>
<T>{isActive ? <p>Active user</p> : <p>Inactive user</p>}</T>

// ✅ Usa Branch al suo posto
<T>
  <Branch 
    branch={isActive}
    true={<p>Active user</p>}
    false={<p>Inactive user</p>}
  />
</T>
```


### Gestire più condizioni

Sostituisci le istruzioni switch o le catene di condizioni if/else:

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

// ✅ Logica di branching pulita
<T>
  <Branch
    branch={status}
    loading={<p>Loading...</p>}
    error={<p>Error occurred</p>}
    success={<p>Success!</p>}
  >
    <p>Unknown status</p>
  </Branch>
</T>
```


### Regole di pluralizzazione

Sostituisci la gestione manuale dei plurali:

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

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


## Utilizzo autonomo

I componenti di branching possono essere usati al di fuori di [`<T>`](/docs/next/api/components/t) per gestire esclusivamente la logica, senza traduzione:

```jsx
// Rendering condizionale puro
<Branch
  branch={theme}
  dark={<DarkModeIcon />}
  light={<LightModeIcon />}
>
  <DefaultIcon />
</Branch>

// Pluralizzazione pura
<Plural
  n={count}
  one={<SingleItemComponent />}
  other={<MultipleItemsComponent />}
/>
```


## Problemi comuni

### Chiavi branch mancanti

Fornisci sempre contenuto di fallback per i valori senza corrispondenza:

```jsx
// ❌ Nessun fallback per valori imprevisti
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
  // E se userRole fosse "moderator"?
/>

// ✅ Includi sempre un fallback
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
>
  <DefaultPanel /> {/* Fallback per qualsiasi altro valore */}
</Branch>
```


### Forme del plurale incomplete

Fornisci le forme del plurale necessarie per la tua impostazione regionale predefinita:

```jsx
// ❌ Forma "other" mancante
<Plural
  n={count}
  one={<p>1 item</p>}
  // E per 0, 2, 3, ecc.?
/>

// ✅ Includi le forme necessarie
<Plural
  n={count}
  zero={<p>No items</p>}
  one={<p>1 item</p>}
  other={<p>{count} items</p>}
/>
```


### Logica nidificata complessa

Sebbene funzioni, consigliamo di mantenere semplice la logica condizionale ed evitare nidificazioni profonde:

```jsx
// ❌ Branch annidato complesso
<Branch branch={status}>
  <Branch branch={subStatus}>
    {/* Difficile da leggere e mantenere */}
  </Branch>
</Branch>

// ✅ Semplificare la logica o usare più componenti
<Branch
  branch={`${status}-${subStatus}`}
  active-online={<ActiveOnline />}
  active-offline={<ActiveOffline />}
  inactive-online={<InactiveOnline />}
>
  <DefaultState />
</Branch>
```

<Callout>
  Per saperne di più sulle regole di pluralizzazione, consulta la [documentazione Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).
</Callout>


## Passaggi successivi

* [Guida alla traduzione delle stringhe](/docs/next/guides/strings) - Traduci testo semplice senza JSX
* [Guida ai contenuti dinamici](/docs/key-concepts/dynamic-content) - Gestisci la traduzione runtime
* Riferimenti API:
  * [Componente `<Branch>`](/docs/next/api/components/branch)