Composants variables
Comment utiliser des composants variables pour intégrer 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 le formatage et la localisation en local, sans envoyer de données à l’API de traduction, ce qui les rend parfaits 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 un formatage spécifique à la langue/au locale<Currency>: Montants avec symboles et formatage monétaire<DateTime>: Dates et heures selon les conventions de la langue/du locale
Démarrage rapide
Les composants Variable fonctionnent dans <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 Variable
Les composants Variable résolvent le problème du contenu dynamique en :
- Enveloppant les valeurs dynamiques pour pouvoir les utiliser à l’intérieur de
<T> - Gérant le formatage localement à l’aide des API d’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
// ❌ Ceci ne fonctionne pas - contenu dynamique dans <T>
<T><p>Hello {username}</p></T>
// ✅ Ceci fonctionne - contenu dynamique encapsulé
<T><p>Hello <Var>{username}</Var></p></T>Guide des composants
<Var> - Contenu dynamique brut
Utilisez <Var> pour tout contenu dynamique qui n’a pas besoin de formatage particulier :
// 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 qui doivent suivre 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> - Montants en devise
Utilisez <Currency> pour formater des montants en devise :
// 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 formater et afficher les dates et les heures :
// Formatage de date de base
<T>
Commande passée le <DateTime>{orderDate}</DateTime>
</T>
// Formatage d'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 locales
<T>
Solde du compte : <Currency currency="USD">{balance}</Currency>
Dernière connexion : <DateTime>{lastLoginTime}</DateTime>
</T>Exception importante
Attention aux composants <T> imbriqués dans des composants de Variable :
// ⚠️ Le contenu <T> interne SERA envoyé pour traduction
<T>
<Var>
<T>Bonjour le monde !</T> {/* Ceci est traduit */}
{privateData} {/* Ceci reste local */}
</Var>
</T>Utilisation autonome
Les composants Variable peuvent être utilisés en dehors de <T> pour un formatage simple :
// Ces composants 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 à transmettre la prop currency pour préciser le type de devise. Cela garantit l’utilisation du symbole monétaire et du formatage appropriés lors de l’affichage de la value :
// ❌ Par défaut USD - peut ne pas correspondre aux attentes des utilisateurs
<T>
L'article coûte <Currency>{price}</Currency>
</T>
// ✅ Spécifier explicitement la devise
<T>
L'article coûte <Currency currency="EUR">{price}</Currency>
</T>D’autres composants proposent également des props optionnelles pour personnaliser le formatage :
// Mise en forme de base
<T>
<Num>{count}</Num> articles en stock
</T>
// Mise en forme personnalisée
<T>
<Num options={{ style: 'percent' }}>{percentage}</Num> taux d’avancement
</T>
// Mise en forme de la 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 simple sans JSX
- Références de l’API :
Que pensez-vous de ce guide ?