Composants de branchement
Comment utiliser des composants de branchement pour gérer du contenu conditionnel dans les traductions
Les composants de branchement permettent d’afficher du contenu de manière conditionnelle au sein des composants <T>. Ils prennent en charge la logique dynamique, comme les instructions if/else et les règles de pluriel, tout en garantissant que toutes les variantes de contenu peuvent être correctement traduites.
Composants disponibles
<Branch>: Contenu conditionnel en fonction de valeurs ou d’états<Plural>: Pluralisation automatique selon les règles propres au locale
Démarrage rapide
Les composants à embranchements fonctionnent à l’intérieur de <T> pour gérer la logique conditionnelle :
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> 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 gèrent 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 :
// Affichage du statut utilisateur
<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>
// Conditions booléennes
<T>
<Branch
branch={isLoggedIn}
true={<p>Bon retour parmi nous !</p>}
false={<p>Veuillez vous connecter</p>}
/>
</T>
// Niveaux d'abonnement
<T>
<Branch
branch={subscription.tier}
free={<p>Passez à la version supérieure pour débloquer les fonctionnalités premium</p>}
premium={<p>Profitez de votre expérience premium</p>}
enterprise={<p>Contactez le support pour des 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>Combiner avec des composants variables
Les composants à embranchements 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 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 des pluriels :
// ❌ 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 :
// Pure conditional rendering
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Pure pluralization
<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 sans correspondance :
// ❌ 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 une logique conditionnelle 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 pluriel, consultez la documentation Unicode CLDR.
Prochaines étapes
- Guide de traduction de 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 :
- Composant
<Branch>
- Composant
Comment trouvez-vous ce guide ?