# General Translation React SDKs (gt-react, gt-next): Tradurre JSX
URL: https://generaltranslation.com/it/docs/react/guides/translating-jsx.mdx
---

title: Tradurre JSX
description: Come tradurre JSX in-place con il componente <T> di General Translation in React, Next.js, TanStack Start e React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

Il componente [`<T>`](/docs/react/reference/components/t) traduce i suoi contenuti figli JSX nell&#39;impostazione regionale attiva. Scrivi il contenuto nella tua lingua sorgente e racchiudilo nel componente: General Translation estrae il testo, lo traduce e renderizza il risultato in-place.

Il componente si comporta allo stesso modo in tutti i framework; cambia solo il pacchetto da importare.

## Racchiudi il contenuto in `<T>` [#wrap]

Racchiudi in `<T>` qualsiasi JSX che contenga testo visibile all&#39;utente. Il markup e gli elementi annidati vengono mantenuti nella traduzione.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *Nota: in Next.js, `<T>` funziona sia nei componenti server sia nei componenti client: lo stesso import da `gt-next` viene risolto automaticamente nell&#39;implementazione server o client.*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *Nota: in React Native, racchiudi i nodi di testo nativi come `<Text>` anziché gli elementi HTML.*
  </Tab>
</Tabs>

Non assegnare una key o un id: General Translation identifica la voce in base al contenuto. Mantieni il contenuto statico; usa i componenti variabili per i valori dinamici (vedi [Formattazione di numeri e date](/docs/react/guides/formatting-variables)).

## Disambiguare con il contesto [#context]

Quando lo stesso testo può essere tradotto in modo diverso a seconda del significato, aggiungi `$context` così i traduttori e il motore possono distinguere tra le diverse voci. Funziona allo stesso modo in tutti i framework.

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## Mantieni stabili le voci con un id [#id]

Passa `$id` per assegnare a una voce un identificatore stabile che non cambia quando modifichi il markup circostante. È facoltativo: usalo quando vuoi un riferimento fisso per una voce.

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*Nota: il contenuto di `<T>` deve essere JSX statico. Sposta i valori condizionali o interpolati in [`<Var>`](/docs/react/reference/components/var), [`<Plural>`](/docs/react/reference/components/plural) o [`<Branch>`](/docs/react/reference/components/branch), in modo che il testo circostante resti traducibile.*
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries