# react-native: Il componente T
URL: https://generaltranslation.com/it/docs/react-native/guides/t.mdx
---
title: Il componente T
description: Come internazionalizzare i componenti JSX con il componente T
---

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

Il [componente `<T>`](/docs/react-native/api/components/t) è lo strumento principale per internazionalizzare i contenuti JSX nella tua applicazione React Native. Avvolge gli elementi JSX e li traduce automaticamente in base all&#39;impostazione regionale dell&#39;utente.

<Callout>
  **Suggerimento:** Con l&#39;[iniezione automatica di JSX](/docs/cli/features/auto-jsx-injection) abilitata, il compilatore può racchiudere automaticamente il tuo JSX in componenti di traduzione durante la fase di build.
  Nella maggior parte dei casi, potresti non dover aggiungere `<T>` manualmente. L&#39;uso manuale di `<T>` resta comunque utile quando ti serve un controllo più granulare, ad esempio per impostare un `id` o un `context` specifico.
</Callout>

## Guida rapida

Trasforma qualsiasi contenuto JSX statico racchiudendolo in [`<T>`](/docs/react-native/api/components/t):

```jsx
import { T } from 'gt-react-native';

// Prima
function Greeting() {
  return <p>Hello, world!</p>;
}

// Dopo
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Per contenuti dinamici all&#39;interno di [`<T>`](/docs/react-native/api/components/t), usa i [Componenti variabili](/docs/react-native/guides/variables) e i [Componenti Branching](/docs/react-native/guides/branches).


## Utilizzo di base

Il [componente `<T>`](/docs/react-native/api/components/t) accetta qualsiasi contenuto JSX come elemento figlio:

```jsx
// Testo semplice
<T>Welcome to our app</T>

// Elementi HTML
<T><h1>Page Title</h1></T>

// JSX annidato complesso
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## Opzioni di configurazione

### Aggiungere il contesto

Fornisci un contesto di traduzione per i termini ambigui:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## Quando usare T

Usa [`<T>`](/docs/react-native/api/components/t) **solo per contenuti statici**:

```jsx
// ✅ Il contenuto statico funziona
<T>
  <button>Clicca qui</button>
  <h1>Benvenuto nel nostro sito</h1>
</T>

// ❌ Il contenuto dinamico causa errori
<T>
  <p>Ciao {username}</p>
  <p>Oggi è {new Date()}</p>
</T>

// ✅ Usa i componenti variabili per il contenuto dinamico
<T>
  <p>Ciao <Var>{username}</Var></p>
</T>
```

<Callout>
  I componenti variabili e Branching sono progettati per essere utilizzati all&#39;interno di [`<T>`](/docs/react-native/api/components/t) con contenuti dinamici.
  Per i dettagli, consulta le guide [componenti variabili](/docs/react-native/guides/variables) e [Branching Components](/docs/react-native/guides/branches).
</Callout>


## Esempi

### Elementi semplici

```jsx
// Testo semplice
<T>Hello, world!</T>

// Pulsante con testo
<T><Button>Submit Form</Button></T>

// Intestazione con stile
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Componenti complessi

```jsx
// Menu di navigazione
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Messaggio di avviso
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### Con le variabili

Puoi usare i componenti variabili per la formattazione localizzata.

```jsx
// Combinazione di testo statico con valori dinamici
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Scopri di più sul [componente `<Var>`](/docs/react-native/api/components/var) nella [Guida ai componenti variabili](/docs/react-native/guides/variables).
</Callout>


## Setup per la produzione

### Processo di build

Aggiungi la traduzione alla pipeline di build:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Comportamento in sviluppo e in produzione

* **Sviluppo**: Con una API key di sviluppo, le traduzioni avvengono on-demand quando i componenti vengono renderizzati. Vedrai le traduzioni in tempo reale mentre sviluppi.
* **Produzione**: Tutte le traduzioni vengono pre-generate durante la fase di build e saranno visibili una volta che l&#39;applicazione sarà online.

Imposta la tua API key di sviluppo nelle variabili d&#39;ambiente per abilitare la traduzione live durante lo sviluppo. Puoi crearne una nella dashboard, in [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Considerazioni sulla privacy

Il contenuto dei componenti [`<T>`](/docs/react-native/api/components/t) viene inviato all&#39;API di GT per la traduzione. Per i dati sensibili, usa i [Componenti variabili](/docs/react-native/guides/variables) per mantenere le informazioni private localmente:

```jsx
// Sicuro - i dati sensibili rimangono locali
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Quanto includere in un singolo `<T>`

Racchiudi **blocchi logici di contenuto** — contenuti che un traduttore leggerebbe e tradurrebbe naturalmente come un insieme.

```jsx
// ✅ Corretto — raggruppare contenuti correlati fornisce ai traduttori il contesto completo
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Corretto — ogni card è un'unità indipendente
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Troppo frammentato — spezza la traduzione e perde il contesto
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Troppo ampio — racchiudere l'intera pagina rende la manutenzione più difficile
<T>
  {/* ...centinaia di righe di JSX... */}
</T>
```

**Regola pratica:** se il testo è collegato visivamente o semanticamente, racchiudilo in un unico `<T>`. Suddividilo solo quando il contenuto è davvero indipendente (ad esempio, un&#39;intestazione e un piè di pagina).

Racchiudere più contenuti in un singolo `<T>` offre ai traduttori un contesto migliore e produce traduzioni più naturali: alcune lingue ristrutturano le frasi o richiedono riferimenti al contenuto circostante.


## Problemi comuni

### Limiti dei componenti

[`<T>`](/docs/react-native/api/components/t) traduce solo i figli diretti, non il contenuto all&#39;interno di altri componenti:

```jsx
// ❌ Errato - il contenuto all'interno dei componenti non verrà tradotto
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* Il contenuto interno non verrà tradotto */}
</T>

// ✅ Corretto - racchiudi ogni componente singolarmente
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</h1></T>
<MyComponent />
```


### Annidamento dei componenti T

```jsx
// ❌ Non annidare i componenti <T>
<T>
  <T>Hello world</T> {/* Non farlo */}
</T>
```


### Errori relativi ai contenuti dinamici

La CLI restituirà un errore in presenza di contenuti dinamici in [`<T>`](/docs/react-native/api/components/t). Racchiudi i valori dinamici nei componenti variabili:

```jsx
// ❌ Errato - il contenuto dinamico causa errori
<T><p>Hello {username}</p></T>

// ✅ Corretto - usa i componenti variabili
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  Consulta la [Guida ai componenti variabili](/docs/react-native/guides/variables) per gestire i valori dinamici e la [Guida ai componenti Branching](/docs/react-native/guides/branches) per i contenuti condizionali.
</Callout>


## Passaggi successivi

<Callout>
  **Vedilo in azione:** Dai un’occhiata all’[app di esempio introduttiva del componente `<T>`](https://github.com/gt-examples/t-component-basics) per una demo funzionante — [anteprima live](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Guida ai componenti variabili](/docs/react-native/guides/variables) - Gestisci i contenuti dinamici nelle traduzioni JSX
* [Guida ai componenti Branching](/docs/react-native/guides/branches) - Aggiungi la logica condizionale alle tue traduzioni