# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestione dei plurali e delle condizioni
URL: https://generaltranslation.com/it/docs/react/guides/handling-plurals-and-branches.mdx
---

title: Gestione dei plurali e delle condizioni
description: Come gestire la pluralizzazione in React e i contenuti tradotti condizionali con <Plural> e <Branch>.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

Diverse impostazioni regionali usano forme plurali diverse: l&#39;inglese usa generalmente `one` e `other`, mentre alcune lingue richiedono forme aggiuntive.

Usa [`<Plural>`](/docs/react/reference/components/plural) per i testi basati su quantità e [`<Branch>`](/docs/react/reference/components/branch) per altri contenuti condizionali.

## Scegli tra plurali e rami [#choose]

* Usa [`<Plural>`](/docs/react/reference/components/plural) quando è un numero a determinare la formulazione, ad esempio per il numero di messaggi o i risultati di ricerca.
* Usa [`<Branch>`](/docs/react/reference/components/branch) quando sono lo status, il piano, un valore booleano o un altro valore a determinare il contenuto.
* Inserisci entrambi i componenti all&#39;interno di [`<T>`](/docs/react/reference/components/t), in modo che ogni variante possa essere tradotta.
* Racchiudi i valori dinamici di ciascuna variante in un [componente variabile](/docs/react/guides/formatting-variables), ad esempio [`<Num>`](/docs/react/reference/components/num) o [`<Var>`](/docs/react/reference/components/var).

Entrambi i componenti funzionano allo stesso modo in React, Next.js, TanStack Start e React Native. Cambia solo il package da importare.

## Gestisci il plurale con `<Plural>` [#plural]

Non creare i plurali verificando `count === 1` o aggiungendo una `s`: questo approccio modella solo la grammatica inglese. Passa il numero come [`n`](/docs/react/reference/components/plural#n), quindi fornisci le forme usate dalla tua lingua sorgente. [`<Plural>`](/docs/react/reference/components/plural) seleziona la forma corretta in base alle [regole plurali Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) dell&#39;impostazione regionale attiva.

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

Specifica le [`categorie plurali`](/docs/react/reference/components/plural#form) usate dalla tua lingua sorgente, comunemente `one` e `other` per l&#39;inglese. I traduttori forniranno le categorie necessarie per ogni lingua di destinazione, che possono includere `zero`, `two`, `few` e `many`.

Se nessuna categoria corrisponde, [`contenuto figlio`](/docs/react/reference/components/plural#children) viene renderizzato come fallback:

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

## Dirama in base a un valore con `<Branch>` [#branch]

Usa [`<Branch>`](/docs/react/reference/components/branch) quando il contenuto dipende da un valore diverso da un conteggio. Passa il valore come [`branch`](/docs/react/reference/components/branch#branch), aggiungi una [prop per ogni valore previsto](/docs/react/reference/components/branch#value) e usa [`contenuto figlio`](/docs/react/reference/components/branch#children) come fallback.

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

Ogni elemento figlio del branch viene tradotto in modo indipendente, così i traduttori possono adattarne l&#39;intera formulazione invece di dover gestire una condizione JavaScript inline.

### Sostituisci le espressioni condizionali all&#39;interno di `<T>`

Un&#39;espressione ternaria inline rende dinamico il contenuto figlio di [`<T>`](/docs/react/reference/components/t) e impedisce un&#39;estrazione affidabile. Rappresenta la stessa condizione con [`<Branch>`](/docs/react/reference/components/branch):

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

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

*Nota: [`<Branch>`](/docs/react/reference/components/branch) ignora gli attributi `data-*` perché le props non riservate rappresentano valori del branch. Inserisci gli ID di test e altri attributi data in un elemento contenitore; la regola lint [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) segnala questo errore.*
## Next steps

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