Componenti variabili
Come usare componenti variabili per contenuti dinamici nelle traduzioni
I componenti variabili consentono di includere in modo sicuro contenuti dinamici all’interno dei componenti <T>. Gestiscono formattazione e localizzazione in locale senza inviare dati all’API di traduzione, rendendoli ideali per informazioni sensibili come nomi utente, numeri di conto e dati finanziari.
Componenti disponibili
<Var>: Contenuto dinamico puro, senza formattazione<Num>: Numeri con formattazione specifica della lingua/locale<Currency>: Valori in valuta con simboli e formattazione<DateTime>: Date e ore con convenzioni locali
Guida rapida
I componenti variabili funzionano all'interno di <T> per gestire contenuti dinamici:
import { T, Var, Num, Currency, DateTime } from 'gt-next';
function UserProfile({ user }) {
return (
<T>
<p>Bentornato/a, <Var>{user.name}</Var>!</p>
<p>Hai <Num>{user.itemCount}</Num> elementi.</p>
<p>Saldo: <Currency currency="USD">{user.balance}</Currency></p>
<p>Ultimo accesso: <DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Come funzionano i componenti variabili
I componenti variabili risolvono il problema dei contenuti dinamici:
- Incartando i valori dinamici così da poterli usare all’interno di
<T> - Gestendo la formattazione in locale tramite le API i18n integrate del browser
- Mantenendo i dati privati: i contenuti non vengono mai inviati all’API di traduzione
- Fornendo la localizzazione in base alla lingua/locale corrente dell’utente
// ❌ Questo non funziona: contenuto dinamico in <T>
<T><p>Ciao {username}</p></T>
// ✅ Questo funziona: contenuto dinamico racchiuso
<T><p>Ciao <Var>{username}</Var></p></T>Guida ai componenti
<Var> - Contenuto dinamico non formattato
Usa <Var> per qualsiasi contenuto dinamico che non necessita di una formattazione speciale:
// Informazioni sull’utente
<T>
<p>Ciao, <Var>{user.name}</Var>!</p>
<p>L’ID del tuo account è <Var>{user.accountId}</Var></p>
</T>
// Rendering condizionale
<T>
Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - Numeri formattati
Usa <Num> per i numeri che devono seguire le regole di formattazione della lingua/locale:
// Formattazione dei numeri di base
<T>
Hai <Num>{itemCount}</Num> articoli nel carrello.
</T>
// Utilizzo autonomo (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>
// Opzioni di formattazione personalizzate
<T>
Distanza: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> - Valori monetari
Usa <Currency> per gli importi in denaro:
// Formattazione di base delle valute (impostazione predefinita: "USD")
<T>
Il totale è <Currency>{total}</Currency>.
</T>
// Valute diverse
<T>
Prezzo: <Currency currency="EUR">{price}</Currency>
</T>
// Formattazione personalizzata
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - Date e orari
Usa <DateTime> per gestire date e orari:
// Formattazione di base della data
<T>
Ordine effettuato il <DateTime>{orderDate}</DateTime>
</T>
// Formattazione dell'ora
<T>
Ultimo aggiornamento: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// Formato data personalizzato
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>Privacy e sicurezza
I dati restano in locale
I componenti variabili gestiscono tutta la formattazione in locale usando le API Intl del browser. Nessun contenuto dinamico viene inviato all’API di traduzione, il che li rende perfetti per:
- Nomi utente e informazioni personali
- Numeri di conto e ID
- Dati finanziari e saldi
- Timestamp e date private
// Sicuro: i dati sensibili restano in locale
<T>
Saldo conto: <Currency currency="USD">{balance}</Currency>
Ultimo accesso: <DateTime>{lastLoginTime}</DateTime>
</T>Eccezione importante
Fai attenzione ai componenti <T> annidati all’interno di componenti con variabili:
// ⚠️ Il contenuto interno di <T> VERRÀ inviato per la traduzione
<T>
<Var>
<T>Ciao, mondo!</T> {/* Questo verrà tradotto */}
{privateData} {/* Questo resta locale */}
</Var>
</T>Utilizzo autonomo
I componenti variabili possono essere usati anche al di fuori di <T> per il semplice formatting:
// Funzionano come i rispettivi metodi .toLocale*()
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // formattazione della valuta
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()Problemi comuni
Ignorare le opzioni di localizzazione
Per <Currency>, assicurati di passare la prop currency per specificare il tipo di valuta. In questo modo verranno applicati il simbolo e la formattazione corretti della valuta quando viene mostrato il valore:
// ❌ Impostazione predefinita su USD: potrebbe non essere ciò che gli utenti si aspettano
<T>
L’articolo costa <Currency>{price}</Currency>
</T>
// ✅ Specifica esplicitamente la valuta
<T>
L’articolo costa <Currency currency="EUR">{price}</Currency>
</T>Altri componenti includono anche prop opzionali che ti permettono di personalizzare la formattazione:
// Formattazione di base
<T>
<Num>{count}</Num> articoli disponibili
</T>
// Formattazione personalizzata
<T>
<Num options={{ style: 'percent' }}>{percentage}</Num> percentuale di completamento
</T>
// Formattazione della data
<T>
Ultimo aggiornamento: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>Prossimi passaggi
- Guida ai componenti con branching - Aggiungi logica condizionale alle traduzioni
- Guida alla traduzione delle stringhe - Traduci testo semplice senza JSX
- Riferimenti API:
Come valuti questa guida?