Composants variables
Comment utiliser des composants variables pour du contenu dynamique dans les traductions
Les composants variables vous permettent d’inclure en toute sécurité du contenu dynamique au sein des composants <T>. Ils gèrent localement le formatage et la localisation sans envoyer de données à l’API de traduction, ce qui les rend idéaux pour des informations sensibles comme les noms d’utilisateur, les numéros de compte et les données financières.
Composants disponibles
<Var>: Contenu dynamique brut sans mise en forme<Num>: Nombres avec mise en forme spécifique au locale<Currency>: Valeurs de Devise avec symboles et mise en forme<DateTime>: Dates et heures selon les conventions du locale
Démarrage rapide
Les composants Variable fonctionnent au sein de <T> pour gérer le contenu dynamique :
import { T, Var, Num, Currency, DateTime } from 'gt-react';
function UserProfile({ user }) {
return (
<T>
<p>Bon retour, <Var>{user.name}</Var> !</p>
<p>Vous avez <Num>{user.itemCount}</Num> éléments.</p>
<p>Solde : <Currency currency="USD">{user.balance}</Currency></p>
<p>Dernière connexion : <DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Fonctionnement des composants variables
Les composants variables résolvent le problème du contenu dynamique en :
- Encapsulant les valeurs dynamiques pour qu’elles puissent être utilisées au sein de
<T> - Gérant le formatage localement à l’aide des API i18n intégrées au navigateur
- Préservant la confidentialité des données — le contenu n’est jamais envoyé à l’API de traduction
- Assurant la localisation en fonction du locale actuel de l’utilisateur
// ❌ Cela ne fonctionne pas - contenu dynamique dans <T>
<T><p>Bonjour {username}</p></T>
// ✅ Cela fonctionne - contenu dynamique encapsulé
<T><p>Bonjour <Var>{username}</Var></p></T>Guide des composants
<Var> - Contenu dynamique brut
Utilisez <Var> pour tout contenu dynamique qui n’a pas besoin de mise en forme particulière :
// Informations utilisateur
<T>
<p>Bonjour <Var>{user.name}</Var> !</p>
<p>Votre identifiant de compte est <Var>{user.accountId}</Var></p>
</T>
// Rendu conditionnel
<T>
Tableau de bord : <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - Nombres formatés
Utilisez <Num> pour les nombres devant respecter les règles de formatage du locale :
// Formatage de base des nombres
<T>
Vous avez <Num>{itemCount}</Num> articles dans votre panier.
</T>
// Utilisation autonome (équivalent à number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>
// Options de formatage personnalisées
<T>
Distance : <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> - Valeurs monétaires
Utilisez <Currency> pour les montants d’argent :
// Formatage de devise de base (par défaut « USD »)
<T>
Votre total est <Currency>{total}</Currency>.
</T>
// Différentes devises
<T>
Prix : <Currency currency="EUR">{price}</Currency>
</T>
// Formatage personnalisé
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - Dates et heures
Utilisez <DateTime> pour gérer les dates et les heures :
// Formatage de date de base
<T>
Commande passée le <DateTime>{orderDate}</DateTime>
</T>
// Formatage de l'heure
<T>
Dernière mise à jour : <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// Format de date personnalisé
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>Confidentialité et sécurité
Les données restent locales
Les composants Variable gèrent tout le formatage en local à l’aide des API Intl du navigateur. Aucun contenu dynamique n’est envoyé à l’API de traduction, ce qui les rend parfaits pour :
- Noms d’utilisateur et informations personnelles
- Numéros de compte et identifiants
- Données financières et soldes
- Horodatages et dates privés
// Sécurisé - les données sensibles restent en local
<T>
Solde du compte : <Currency currency="USD">{balance}</Currency>
Dernière connexion : <DateTime>{lastLoginTime}</DateTime>
</T>Exception importante
Attention aux composants <T> imbriqués à l’intérieur des composants variables :
// ⚠️ Le contenu <T> interne SERA envoyé pour traduction
<T>
<Var>
<T>Bonjour, le monde !</T> {/* Ceci sera traduit */}
{privateData} {/* Ceci reste en local */}
</Var>
</T>Utilisation autonome
Les composants Variable peuvent être utilisés en dehors de <T> pour un simple formatage :
// Fonctionnent comme leurs méthodes .toLocale*() respectives
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // formatage du prix
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()Problèmes fréquents
Ignorer les options de localisation
Pour <Currency>, veillez à passer la prop currency pour spécifier le type de devise. Cela garantit l’utilisation du symbole monétaire et du formatage corrects lors de l’affichage de la valeur :
// ❌ USD par défaut - peut ne pas correspondre aux attentes des utilisateurs
<T>
L'article coûte <Devise>{price}</Devise>
</T>
// ✅ Spécifier explicitement la devise
<T>
L'article coûte <Devise currency="EUR">{price}</Devise>
</T>D’autres composants proposent également des props facultatives pour personnaliser le formatage :
// Formatage de base
<T>
<Num>{count}</Num> articles en stock
</T>
// Formatage personnalisé
<T>
<Num options={{ style: 'percent' }}>{percentage}</Num> taux de complétion
</T>
// Formatage de date
<T>
Dernière mise à jour : <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>Prochaines étapes
- Guide des composants à embranchements - Ajoutez une logique conditionnelle à vos traductions
- Guide de traduction de chaînes - Traduisez du texte brut sans JSX
- Références de l’API :
- Composant
<Var> - Composant
<Num> - Composant
<Currency>
- Composant
Comment trouvez-vous ce guide ?