Componenti con diramazioni
Come usare componenti con diramazioni per contenuti condizionali nelle traduzioni
I componenti con diramazioni consentono il rendering condizionale dei contenuti all'interno dei componenti <T>. Gestiscono logiche dinamiche come le istruzioni if/else e le regole di pluralizzazione, garantendo 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 specifiche della lingua/locale
Guida rapida
I componenti di branching funzionano all'interno di <T> per gestire la logica condizionale:
import { T, Branch, Plural, Num, Var } from 'gt-react';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> è online in questo momento</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 attesi
- Abilitazione della traduzione di tutte le possibili varianti di contenuto
- Applicazione automatica delle regole della lingua per la pluralizzazione
// ❌ Questo non funziona: logica condizionale in <T>
<T><p>{isActive ? 'L’utente è attivo' : 'L’utente è inattivo'}</p></T>
// ✅ Questo funziona: logica condizionale con branching
<T>
<Branch
branch={isActive}
true={<p>L’utente è attivo</p>}
false={<p>L’utente è inattivo</p>}
/>
</T>Guida ai componenti
<Branch> - Contenuto condizionale
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>Accedi</p>}
/>
</T>
// Livelli di abbonamento
<T>
<Branch
branch={subscription.tier}
free={<p>Passa al piano superiore 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 dell'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>Combinazione con componenti variabili
I rami e i componenti variabili funzionano perfettamente insieme:
<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 ordine sconosciuto</p>
</Branch>
</T>Quando usare i componenti ramificati
Sostituire gli operatori ternari
Converti la logica condizionale da usare 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 le molteplici condizioni 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 dei plurali:
// ❌ 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 standalone
I componenti di branching possono essere usati anche al di fuori di <T> per gestire esclusivamente la logica, senza traduzione:
// Rendering condizionale puro
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Pluralizzazione pura
<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 "moderator"?
/>
// ✅ 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/locale 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
Anche se funziona, consigliamo di mantenere semplice la logica condizionale ed evitare annidamenti profondi:
// ❌ Diramazione annidata complessa
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difficile da leggere e da mantenere */}
</Branch>
</Branch>
// ✅ Appiattisci 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 delle stringhe - Traduci testo semplice senza JSX
- Guida ai contenuti dinamici - Gestisci la traduzione a runtime
- Riferimenti API:
Come valuti questa guida?