# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<T>`
URL: https://generaltranslation.com/it/docs/react/reference/components/t.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduce i contenuti figli JSX in-place. Riferimento API per il componente `<T>`.

Il componente `<T>` è il principale metodo di traduzione in `gt-react`. Traduce i suoi contenuti figli JSX — testo semplice e markup annidato — nell&#39;impostazione regionale attiva, in-place.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.*

## Panoramica [#overview]

Racchiudi il JSX statico in `<T>` e verrà tradotto nell&#39;impostazione regionale attiva. Usa componenti variabili come [`<Var>`](/docs/react/reference/components/var) e [`<Num>`](/docs/react/reference/components/num) per i valori dinamici.

```tsx
<T>
  Today, I went to
  <p>
    the <b>store</b> to buy some <i>groceries</i>.
  </p>
</T>
```

*Nota: Le app `gt-react` e TanStack Start renderizzate lato server forniscono l&#39;impostazione regionale e le traduzioni tramite [`<GTProvider>`](/docs/react/reference/components/gt-provider), mentre le app `gt-next` e `gt-react-native` usano il provider del proprio framework senza queste props. Le SPA React inizializzate con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) non richiedono un provider.*

## Come funziona [#how-it-works]

* **Traduzione in fase di build.** In produzione, il contenuto all&#39;interno di un `<T>` viene tradotto durante la fase di build (o di distribuzione), prima che gli utenti carichino l&#39;app. In questo modo il runtime resta veloce, ma si può tradurre solo il contenuto noto al build time. Le traduzioni generate vengono servite dalla CDN o dall&#39;output di build della tua app e, se manca una traduzione, viene usato come fallback il contenuto originale.
* **On-demand in sviluppo.** Con l&#39;hot reload di sviluppo configurato, `<T>` richiede le traduzioni mancanti mentre prototipi. Nei componenti renderizzati sul client, mostra il contenuto sorgente finché una traduzione non è disponibile e può mantenere la traduzione precedente durante un aggiornamento. Le richieste runtime client rifiutate vengono registrate nei log, con deduplicazione degli errori ripetuti. I Server Component, invece, attendono il lookup della propria traduzione. I render di produzione usano le traduzioni generate e, se manca una traduzione, ricorrono al contenuto sorgente.
* **Traduce i discendenti, non il contenuto figlio dinamico.** `<T>` traduce letteralmente il JSX scritto tra i suoi tag. Il contenuto passato tramite una variabile (ad esempio `{greeting}`) non può essere tradotto e genera un errore: racchiudi i valori dinamici in un componente variabile. Una buona regola pratica: tutto ciò che è scritto letteralmente tra i due tag `<T>` viene tradotto. Evita di annidare componenti `<T>`.

## Props [#props]

| Prop                                  | Descrizione                                                        | Tipo        | Facoltativo | Predefinito |
| ------------------------------------- | ------------------------------------------------------------------ | ----------- | ----------- | ----------- |
| [`children`](#children)               | Il contenuto JSX da tradurre.                                      | `ReactNode` | No          | —           |
| [`$context`](#context)                | Contesto di disambiguazione per i traduttori.                      | `string`    | Sì          | —           |
| [`$id`](#id)                          | Identificatore stabile della voce.                                 | `string`    | Sì          | —           |
| [`$maxChars`](#max-chars)             | Lunghezza massima richiesta per le traduzioni generate.            | `number`    | Sì          | —           |
| [`$requiresReview`](#requires-review) | Indica che la traduzione richiede approvazione prima dell&#39;uso. | `boolean`   | Sì          | —           |

### `children` [#children]

**Tipo** `ReactNode` · **Obbligatorio**

Il contenuto da tradurre. Può essere semplice testo o una struttura JSX, inclusi componenti variabili e di branching. Il contenuto deve essere statico; i valori dinamici devono essere racchiusi in un componente variabile.

### `$context` [#context]

**Tipo** `string` · **Facoltativo**

Contesto aggiuntivo per affinare la traduzione. Utile per chiarire espressioni ambigue, così che i traduttori restituiscano il significato desiderato.

### `$id` [#id]

**Tipo** `string` · **Facoltativo**

Un identificatore stabile per la voce di traduzione, che garantisce la coerenza delle traduzioni e rende la voce facile da trovare nel Translation Editor.

### `$maxChars` [#max-chars]

**Tipo** `number` · **Facoltativo**

Richiede agli strumenti di traduzione un numero massimo di caratteri espresso come intero positivo. Il runtime non tronca il contenuto tradotto.

### `$requiresReview` [#requires-review]

**Tipo** `boolean` · **Facoltativo**

Contrassegna il contenuto tradotto come soggetto ad approvazione prima dell&#39;uso, in modo che venga trattenuto per la revisione anziché essere pubblicato automaticamente.

## Esempi [#examples]

*Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

```tsx title="Greeting.tsx"
import { T } from 'gt-react';

export default function Greeting() {
  return (
    <T>
      Hello, world! // [!code highlight]
    </T>
  );
}
```

```tsx title="DynamicGreeting.tsx"
import { T, Var } from 'gt-react';

export default function DynamicGreeting({ user }) {
  return (
    <T>
      Hello, <Var>{user.name}</Var>! // [!code highlight]
    </T>
  );
}
```

```tsx title="ItemCount.tsx"
import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <T>
      <Plural
        n={count} // [!code highlight]
        one={<>You have an item.</>}
        other={<>You have items.</>}
      />
    </T>
  );
}
```

```tsx title="DynamicContent.tsx"
import { T } from 'gt-react';

export default function DynamicContent({ greeting }) {
  return (
    <T>
      {greeting} // ❌ il contenuto figlio dinamico non può essere tradotto — racchiudilo in <Var> // [!code highlight]
    </T>
  );
}
```

```tsx title="Descendants.tsx"
import { T } from 'gt-react';

const ValidTranslation = ({ children }) => <div><b>{children}</b></div>;
const InvalidTranslation = () => <div><b>No translation</b></div>;

export default function Example() {
  return (
    <T>
      <div><b>This is valid!</b></div> {/* tradotto */}

      <ValidTranslation>
        Hello, world! {/* tradotto */}
      </ValidTranslation>

      <InvalidTranslation /> {/* non tradotto — il contenuto non è letterale qui */}
    </T>
  );
}
```

## Note [#notes]

* `<T>` serve a tradurre i contenuti. Usalo per testo semplice o strutture JSX, incluse variabili e pluralizzazione.
* I setup basati su provider renderizzano `<T>` all&#39;interno di [`<GTProvider>`](/docs/react/reference/components/gt-provider). Le React SPA e i server component sincroni di `gt-next` non ne richiedono uno, ma i client component di `gt-next` sì.
* Per tradurre stringhe indipendenti come segnaposto ed etichette, usa [`useGT`](/docs/react/reference/hooks/use-gt).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.