Composants conditionnels
Utiliser des composants conditionnels pour du contenu soumis à des conditions dans les traductions
Les composants conditionnels permettent d’afficher du contenu de façon conditionnelle au sein des composants <T>. Ils gèrent la logique dynamique, comme les instructions if/else et les règles de pluralisation, tout en garantissant que toutes les variantes de contenu peuvent être correctement traduites.
Composants disponibles
<Branch>: Contenu conditionnel selon des valeurs ou des états<Plural>: Pluralisation automatique selon les règles spécifiques à la locale
Démarrage rapide
Les composants conditionnels fonctionnent à l’intérieur 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 actuellement en ligne</p>}
away={<p><Var>{user.name}</Var> est absent(e)</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 à embranchements
Les composants à embranchements 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 pluralization
// ❌ Ceci ne fonctionne pas - logique conditionnelle dans <T>
<T><p>{isActive ? 'L'utilisateur est actif' : 'L'utilisateur est inactif'}</p></T>
// ✅ Ceci 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 du composant
<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 !</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 les solutions entreprise</p>}
>
<p>Statut d'abonnement indisponible</p>
</Branch>
</T><Plural> - Pluriel intelligent
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 Variable
Les composants de branchement et les composants Variable fonctionnent ensemble sans friction :
<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>Commande <Var>{order.id}</Var> 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 opérateur ternaire dans <T>
<T>{isActive ? <p>Utilisateur actif</p> : <p>Utilisateur inactif</p>}</T>
// ✅ Utilisez Branch à la place
<T>
<Branch
branch={isActive}
true={<p>Utilisateur actif</p>}
false={<p>Utilisateur inactif</p>}
/>
</T>Gérer plusieurs conditions
Remplacez les blocs switch ou les multiples conditions if/else :
// ❌ Logique conditionnelle complexe
<T>
{status === 'loading' ? <p>Chargement...</p> :
status === 'error' ? <p>Erreur survenue</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>Erreur survenue</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 implémenter une 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 sans correspondance :
// ❌ Pas de secours pour les valeurs inattendues
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// Et si userRole est "moderator" ?
/>
// ✅ Toujours inclure un secours
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Secours pour toute autre valeur */}
</Branch>Formes plurielles incomplètes
Fournissez les formes plurielles requises pour votre locale par défaut :
// ❌ Forme "other" manquante
<Plural
n={count}
one={<p>1 élément</p>}
// Qu'en est-il de 0, 2, 3, etc. ?
/>
// ✅ Inclure les formes requises
<Plural
n={count}
zero={<p>Aucun élément</p>}
one={<p>1 élément</p>}
other={<p>{count} éléments</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 :
// ❌ Branchement imbriqué complexe
<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 de chaînes - Traduire du texte en clair sans JSX
- Guide du contenu dynamique - Gérer la traduction au moment de l’exécution
- Référence de l’API :
Que pensez-vous de ce guide ?