Composants à embranchements
Utiliser des composants à embranchements pour du contenu conditionnel dans les traductions
Les composants à embranchements permettent d’afficher du contenu conditionnel à l’intérieur des composants <T>. Ils gèrent une logique dynamique comme les conditions if/else et les règles de pluralisation, tout en garantissant que toutes les variantes de contenu puissent être correctement traduites.
Composants disponibles
<Branch>: Contenu conditionnel en fonction de valeurs ou d’états<Plural>: Pluralisation automatique selon les règles propres à la locale
Démarrage rapide
Les composants conditionnels s’utilisent au sein de <T> pour gérer la logique conditionnelle :
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> est en ligne</p>}
away={<p><Var>{user.name}</Var> est absent</p>}
>
<p>Statut de <Var>{user.name}</Var> inconnu</p>
</Branch>
<Plural
n={messageCount}
one={<p>Vous avez <Num>{messageCount}</Num> message</p>}
other={<p>Vous avez <Num>{messageCount}</Num> messages</p>}
/>
</T>
);
}Fonctionnement des composants de branchement
Les composants de branchement résolvent le rendu conditionnel dans les traductions en :
- Remplaçant les opérateurs ternaires et la logique conditionnelle à l’intérieur de
<T> - Fournissant un contenu de secours lorsque les conditions ne correspondent pas aux valeurs attendues
- Permettant la traduction de toutes les variantes de contenu possibles
- Appliquant automatiquement les règles de locale pour la pluralisation
// ❌ Cela ne fonctionne pas - logique conditionnelle dans <T>
<T><p>{isActive ? 'L'utilisateur est actif' : 'L'utilisateur est inactif'}</p></T>
// ✅ Cela fonctionne - logique conditionnelle avec branchement
<T>
<Branch
branch={isActive}
true={<p>L'utilisateur est actif</p>}
false={<p>L'utilisateur est inactif</p>}
/>
</T>Guide des composants
<Branch> - Contenu conditionnel
Utilisez <Branch> pour tout rendu conditionnel basé sur des valeurs ou des états :
// User status display
<T>
<Branch
branch={user.role}
admin={<p>Tableau de bord administrateur</p>}
user={<p>Tableau de bord utilisateur</p>}
guest={<p>Accès invité</p>}
>
<p>Niveau d'accès inconnu</p>
</Branch>
</T>
// Boolean conditions
<T>
<Branch
branch={isLoggedIn}
true={<p>Bienvenue !</p>}
false={<p>Veuillez vous connecter</p>}
/>
</T>
// Subscription tiers
<T>
<Branch
branch={subscription.tier}
free={<p>Passez à la version premium pour débloquer toutes les fonctionnalités</p>}
premium={<p>Profitez de votre expérience premium</p>}
enterprise={<p>Contactez le support pour les solutions entreprise</p>}
>
<p>Statut d'abonnement indisponible</p>
</Branch>
</T><Plural> - Pluralisation intelligente
Utilisez <Plural> pour le contenu qui varie en fonction de la quantité :
// Pluralisation de base
<T>
<Plural
n={itemCount}
one={<p><Num>{itemCount}</Num> article dans le panier</p>}
other={<p><Num>{itemCount}</Num> articles dans le panier</p>}
/>
</T>
// Gestion du zéro
<T>
<Plural
n={notifications}
zero={<p>Aucune nouvelle notification</p>}
one={<p><Num>{notifications}</Num> notification</p>}
other={<p><Num>{notifications}</Num> notifications</p>}
/>
</T>
// Pluralisation complexe (suit les règles Unicode CLDR)
<T>
<Plural
n={days}
zero={<p>À échéance aujourd'hui</p>}
one={<p>À échéance dans <Num>{days}</Num> jour</p>}
few={<p>À échéance dans <Num>{days}</Num> jours</p>}
many={<p>À échéance dans <Num>{days}</Num> jours</p>}
other={<p>À échéance dans <Num>{days}</Num> jours</p>}
/>
</T>Combinaison avec des composants variables
Les composants de branchement et les composants variables fonctionnent parfaitement ensemble :
<T>
<Branch
branch={order.status}
pending={
<p>
Commande <Var>{order.id}</Var> en attente.
Total : <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
Commande <Var>{order.id}</Var> expédiée le <DateTime>{order.shippedDate}</DateTime>
</p>
}
delivered={
<p>La commande <Var>{order.id}</Var> a été livrée avec succès</p>
}
>
<p>Statut de la commande inconnu</p>
</Branch>
</T>Quand utiliser des composants à embranchements
Remplacer les opérateurs ternaires
Convertissez la logique conditionnelle pour l’utiliser avec <T> :
// ❌ Impossible d'utiliser un ternaire dans <T>
<T>{isActive ? <p>Utilisateur actif</p> : <p>Utilisateur inactif</p>}</T>
// ✅ Utilisez plutôt Branch
<T>
<Branch
branch={isActive}
true={<p>Utilisateur actif</p>}
false={<p>Utilisateur inactif</p>}
/>
</T>Gérer plusieurs conditions
Remplacez les instructions switch ou les enchaînements de conditions if/else :
// ❌ Logique conditionnelle complexe
<T>
{status === 'loading' ? <p>Chargement...</p> :
status === 'error' ? <p>Une erreur s'est produite</p> :
status === 'success' ? <p>Succès !</p> :
<p>Statut inconnu</p>}
</T>
// ✅ Logique de branchement claire
<T>
<Branch
branch={status}
loading={<p>Chargement...</p>}
error={<p>Une erreur s'est produite</p>}
success={<p>Succès !</p>}
>
<p>Statut inconnu</p>
</Branch>
</T>Règles de pluralisation
Remplacez la gestion manuelle du pluriel :
// ❌ Pluralisation manuelle
<T>{count === 1 ? <p>1 élément</p> : <p>{count} éléments</p>}</T>
// ✅ Pluralisation automatique
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> élément</p>}
other={<p><Num>{count}</Num> éléments</p>}
/>
</T>Utilisation autonome
Les composants de branchement peuvent être utilisés en dehors de <T> pour de la logique pure, sans traduction :
// Rendu conditionnel pur
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Pluralisation pure
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Problèmes fréquents
Clés de branche manquantes
Fournissez toujours un contenu de secours pour les valeurs non appariées :
// ❌ Pas de valeur de secours pour les valeurs inattendues
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// Et si userRole vaut "moderator" ?
/>
// ✅ Toujours inclure une valeur de secours
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Valeur de secours pour toute autre valeur */}
</Branch>Formes plurielles incomplètes
Fournissez les formes plurielles nécessaires pour votre locale par défaut :
// ❌ Forme « other » manquante
<Plural
n={count}
one={<p>1 item</p>}
// Qu'en est-il de 0, 2, 3, etc. ?
/>
// ✅ Inclure les formes requises
<Plural
n={count}
zero={<p>No items</p>}
one={<p>1 item</p>}
other={<p>{count} items</p>}
/>Logique imbriquée complexe
Même si cela fonctionne, nous recommandons de garder la logique de branchement simple et d’éviter les imbrications trop profondes :
// ❌ Branchements imbriqués complexes
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difficile à lire et à maintenir */}
</Branch>
</Branch>
// ✅ Aplatir la logique ou utiliser plusieurs composants
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Pour en savoir plus sur les règles de pluralisation, consultez la documentation Unicode CLDR.
Prochaines étapes
- Guide de traduction des chaînes - Traduire du texte simple sans JSX
- Guide sur le contenu dynamique - Gérer la traduction à l’exécution
- Référence de l’API :
Comment trouvez-vous ce guide ?