# General Translation React SDKs (gt-react, gt-next): T
URL: https://generaltranslation.com/it/docs/react/reference/components/t.mdx
---

title: T
description: Traduce i contenuti figli JSX in-place con General Translation gt-react. Riferimento API per 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`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

## 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: `<T>` deve essere renderizzato all&#39;interno di [`<GTProvider>`](/docs/react/reference/components/gt-provider) per poter accedere alle traduzioni. Per le stringhe autonome, usa invece [`useGT`](/docs/react/reference/hooks/use-gt).*

## 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 una chiave API di sviluppo configurata, `<T>` traduce on-demand, così puoi visualizzare in anteprima le impostazioni regionali durante la prototipazione. Durante il caricamento di una traduzione, `<T>` restituisce `undefined` (a meno che la sorgente e la destinazione non condividano la stessa lingua, come `en-US` e `en-GB`); in caso di errore, restituisce il contenuto originale. Questo ritardo non si verifica nelle build di produzione.
* **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                                                        | Type        | 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 della traduzione.                                | `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**

Il numero massimo di caratteri consentito per la traduzione. La library applica questo limite, troncando gli output più lunghi.

### `$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]

```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.
* Deve essere racchiuso in un [`<GTProvider>`](/docs/react/reference/components/gt-provider) per accedere al contesto di traduzione.
* Per tradurre stringhe indipendenti come segnaposto ed etichette, usa [`useGT`](/docs/react/reference/hooks/use-gt).