Componenti ramificati
Come usare i componenti ramificati per contenuti condizionali nelle traduzioni
I componenti ramificati consentono il rendering condizionale dei contenuti all'interno dei componenti <T>. Gestiscono logiche dinamiche come istruzioni if/else e regole di pluralizzazione, assicurando che tutte le varianti di contenuto possano essere tradotte correttamente.
Componenti disponibili
<Branch>: Contenuto condizionale in base a valori o stati<Plural>: Pluralizzazione automatica secondo le regole locali
Guida rapida
I branching component funzionano all’interno di <T> per gestire la logica condizionale:
import { T, Branch, Plural, Num, Var } from 'gt-next';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> è online</p>}
away={<p><Var>{user.name}</Var> è assente</p>}
>
<p>Stato di <Var>{user.name}</Var> sconosciuto</p>
</Branch>
<Plural
n={messageCount}
one={<p>Hai <Num>{messageCount}</Num> messaggio</p>}
other={<p>Hai <Num>{messageCount}</Num> messaggi</p>}
/>
</T>
);
}Come funzionano i Branching Components
I Branching Components risolvono il rendering condizionale nelle traduzioni tramite:
- Sostituzione degli operatori ternari e della logica condizionale all'interno di
<T> - Contenuti di fallback quando le condizioni non corrispondono ai valori previsti
- Traduzione di tutte le possibili varianti di contenuto
- Applicazione automatica delle regole del locale per la pluralizzazione
// ❌ Questo non funziona: logica condizionale in <T>
<T><p>{isActive ? 'L’utente è attivo' : 'L’utente non è attivo'}</p></T>
// ✅ Questo funziona: logica condizionale con diramazione
<T>
<Branch
branch={isActive}
true={<p>L’utente è attivo</p>}
false={<p>L’utente non è attivo</p>}
/>
</T>Guida ai componenti
<Branch> - Contenuti condizionali
Usa <Branch> per qualsiasi rendering condizionale basato su valori o stati:
// Visualizzazione stato utente
<T>
<Branch
branch={user.role}
admin={<p>Dashboard amministratore</p>}
user={<p>Dashboard utente</p>}
guest={<p>Accesso ospite</p>}
>
<p>Livello di accesso sconosciuto</p>
</Branch>
</T>
// Condizioni booleane
<T>
<Branch
branch={isLoggedIn}
true={<p>Bentornato!</p>}
false={<p>Effettua il login</p>}
/>
</T>
// Livelli di abbonamento
<T>
<Branch
branch={subscription.tier}
free={<p>Effettua l'upgrade per sbloccare le funzionalità premium</p>}
premium={<p>Goditi la tua esperienza premium</p>}
enterprise={<p>Contatta il supporto per soluzioni enterprise</p>}
>
<p>Stato abbonamento non disponibile</p>
</Branch>
</T><Plural> - Pluralizzazione intelligente
Usa <Plural> per i contenuti che variano in base alla quantità:
// Pluralizzazione di base
<T>
<Plural
n={itemCount}
one={<p><Num>{itemCount}</Num> articolo nel carrello</p>}
other={<p><Num>{itemCount}</Num> articoli nel carrello</p>}
/>
</T>
// Gestione dello zero
<T>
<Plural
n={notifications}
zero={<p>Nessuna nuova notifica</p>}
one={<p><Num>{notifications}</Num> notifica</p>}
other={<p><Num>{notifications}</Num> notifiche</p>}
/>
</T>
// Pluralizzazione complessa (segue le regole Unicode CLDR)
<T>
<Plural
n={days}
zero={<p>Scade oggi</p>}
one={<p>Scade tra <Num>{days}</Num> giorno</p>}
few={<p>Scade tra <Num>{days}</Num> giorni</p>}
many={<p>Scade tra <Num>{days}</Num> giorni</p>}
other={<p>Scade tra <Num>{days}</Num> giorni</p>}
/>
</T>In combinazione con componenti variabili
Il branching e i componenti variabili funzionano insieme senza problemi:
<T>
<Branch
branch={order.status}
pending={
<p>
Ordine <Var>{order.id}</Var> in sospeso.
Totale: <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
Ordine <Var>{order.id}</Var> spedito il <DateTime>{order.shippedDate}</DateTime>
</p>
}
delivered={
<p>Ordine <Var>{order.id}</Var> consegnato correttamente</p>
}
>
<p>Stato dell'ordine sconosciuto</p>
</Branch>
</T>Quando usare i componenti con diramazioni
Sostituire gli operatori ternari
Converti la logica condizionale per l’uso all’interno di <T>:
// ❌ Non è possibile usare l'operatore ternario in <T>
<T>{isActive ? <p>Utente attivo</p> : <p>Utente inattivo</p>}</T>
// ✅ Usa Branch al suo posto
<T>
<Branch
branch={isActive}
true={<p>Utente attivo</p>}
false={<p>Utente inattivo</p>}
/>
</T>Gestire più condizioni
Sostituisci le istruzioni switch o i blocchi multipli if/else:
// ❌ Logica condizionale complessa
<T>
{status === 'loading' ? <p>Caricamento in corso...</p> :
status === 'error' ? <p>Si è verificato un errore</p> :
status === 'success' ? <p>Operazione riuscita!</p> :
<p>Stato sconosciuto</p>}
</T>
// ✅ Logica di branching pulita
<T>
<Branch
branch={status}
loading={<p>Caricamento in corso...</p>}
error={<p>Si è verificato un errore</p>}
success={<p>Operazione riuscita!</p>}
>
<p>Stato sconosciuto</p>
</Branch>
</T>Regole di pluralizzazione
Sostituisci la gestione manuale del plurale:
// ❌ Pluralizzazione manuale
<T>{count === 1 ? <p>1 elemento</p> : <p>{count} elementi</p>}</T>
// ✅ Pluralizzazione automatica
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> elemento</p>}
other={<p><Num>{count}</Num> elementi</p>}
/>
</T>Utilizzo indipendente
I componenti di branching possono essere usati anche al di fuori di <T> per logica pura, senza traduzione:
// Rendering condizionale puro
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Pura gestione del plurale
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Problemi comuni
Chiavi di diramazione mancanti
Fornisci sempre un contenuto di fallback per i valori senza corrispondenza:
// ❌ Nessun fallback per valori imprevisti
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// E se userRole fosse "moderatore"?
/>
// ✅ Includi sempre un fallback
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Fallback per qualsiasi altro valore */}
</Branch>Forme plurali incomplete
Fornisci le forme plurali necessarie per la tua lingua/località predefinita:
// ❌ Forma "other" mancante
<Plural
n={count}
one={<p>1 item</p>}
// E 0, 2, 3, ecc.?
/>
// ✅ Includi le forme obbligatorie
<Plural
n={count}
zero={<p>Nessun elemento</p>}
one={<p>1 elemento</p>}
other={<p>{count} elementi</p>}
/>Logica annidata complessa
Sebbene questo approccio funzioni, consigliamo di mantenere semplice la logica di branching ed evitare annidamenti profondi:
// ❌ Ramificazione nidificata complessa
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difficile da leggere e manutenere */}
</Branch>
</Branch>
// ✅ Semplifica la logica o usa più componenti
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Scopri di più sulle regole di pluralizzazione nella documentazione di Unicode CLDR.
Prossimi passi
- Guida alla traduzione di stringhe - Traduci testo semplice senza JSX
- Guida ai contenuti dinamici - Gestisci la traduzione a runtime
- Riferimenti API:
Come valuti questa guida?