Il componente <T>
Come internazionalizzare i componenti JSX con il componente <T>
Il componente <T> è lo strumento principale per internazionalizzare i contenuti JSX nella tua applicazione React. Wrappa gli elementi JSX e li traduce automaticamente in base alla lingua/locale dell’utente.
Guida rapida
Trasforma qualsiasi contenuto JSX statico racchiudendolo con <T>:
import { T } from 'gt-react';
// Before
function Greeting() {
return <p>Ciao, mondo!</p>;
}
// After
function Greeting() {
return <T><p>Ciao, mondo!</p></T>;
}Per contenuti dinamici all'interno di <T>, utilizza i Variable Components e i Branching Components.
Utilizzo di base
Il componente <T> accetta qualsiasi contenuto JSX come children:
// Simple text
<T>Benvenuto/a nella nostra app</T>
// HTML elements
<T><h1>Titolo pagina</h1></T>
// Complex nested JSX
<T>
<div className="alert">
<span>Importante:</span> Leggere attentamente.
</div>
</T>Opzioni di configurazione
Aggiungere contesto
Fornisci contesto di traduzione per i termini ambigui:
<T context="notification popup, not bread">
Fai clic sul toast per chiuderlo
</T>Impostazione degli ID di traduzione
Usa ID espliciti per avere traduzioni coerenti:
<T id="welcome-message">
Bentornato, utente!
</T>Quando usare <T>
Usa <T> solo per contenuti statici:
// ✅ Il contenuto statico funziona
<T><button>Fai clic qui</button></T>
<T><h1>Benvenuto sul nostro sito</h1></T>
// ❌ Il contenuto dinamico non funziona
<T><p>Ciao {username}</p></T>
<T><p>Oggi è {new Date()}</p></T>
// ✅ Usa i componenti Variable per il contenuto dinamico
<T>
<p>Ciao <Var>{username}</Var></p>
</T>I componenti Variable e Branching sono progettati per essere utilizzati all'interno di <T> per contenuti dinamici. Per maggiori dettagli, consulta le guide Componenti Variable e Componenti Branching.
Esempi
Elementi semplici
// Testo di base
<T>Ciao, mondo!</T>
// Pulsante con testo
<T><Button>Invia il modulo</Button></T>
// Intestazione con stile
<T><h1 className="text-2xl font-bold">Benvenuti</h1></T>Componenti complessi
// Menu di navigazione
<T>
<nav className="navbar">
<a href="/about">Chi siamo</a>
<a href="/contact">Contatti</a>
</nav>
</T>
// Messaggio di avviso
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>La sessione scadrà tra 5 minuti</span>
</div>
</T>Con variabili
// Combinare testo statico con valori dinamici
<T>
<p>Bentornato/a, <Var>{user.name}</Var>!</p>
</T>
// Modulo con contenuti misti
<T>
<label>
Email: <input type="email" placeholder="Inserisci il tuo indirizzo email" />
</label>
</T>Scopri di più sul componente <Var> nella guida ai componenti variabili.
Configurazione per la produzione
Processo di build
Aggiungi le traduzioni alla pipeline di build:
{
"scripts": {
"build": "npx gtx-cli translate && <...IL_TUO_COMANDO_DI BUILD...>"
}
}Comportamento in sviluppo vs produzione
- Sviluppo: Con una chiave API 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’applicazione è online.
Imposta la chiave API di sviluppo nelle variabili d’ambiente per abilitare le traduzioni live durante lo sviluppo. Puoi crearne una nella Dashboard, alla voce API Keys.
Considerazioni sulla privacy
Il contenuto dei componenti <T> viene inviato alle API di GT per la traduzione. Per i dati sensibili, usa i Variable Components per mantenere le informazioni private in locale:
// Sicuro: i dati sensibili restano in locale
<T>
Bentornato, <Var>{username}</Var>
</T>Problemi comuni
Confini dei componenti
<T> traduce solo i figli diretti, non il contenuto all’interno di altri componenti:
// ❌ Errato: il contenuto all'interno dei componenti non verrà tradotto
function MyComponent() {
return <p>Questo non verrà tradotto</p>;
}
<T>
<h1>Questo verrà tradotto</h1>
<MyComponent /> {/* Il contenuto all'interno non verrà tradotto */}
</T>
// ✅ Corretto: avvolgi ogni componente singolarmente
function MyComponent() {
return <T><p>Questo verrà tradotto</p></T>;
}
<T><h1>Questo verrà tradotto</h1></T>
<MyComponent />Annidare i componenti <T>
// ❌ Non annidare i componenti <T>
<T>
<T>Ciao, mondo</T> {/* Non farlo */}
</T>Errori nei contenuti dinamici
La CLI restituirà un errore per i contenuti dinamici in <T>. Racchiudi i valori dinamici nei componenti Variable:
// ❌ Errato: il contenuto dinamico si rompe
<T><p>Ciao {username}</p></T>
// ✅ Corretto: usa i componenti Variable
<T><p>Ciao <Var>{username}</Var></p></T>Vedi la Guida ai componenti variabili per gestire valori dinamici e la Guida ai componenti con diramazioni per contenuti condizionali.
Prossimi passi
- Guida ai componenti variabili - Gestisci contenuti dinamici nelle traduzioni JSX
- Guida ai componenti ramificati - Aggiungi logica condizionale alle traduzioni
Come valuti questa guida?