Le composant « <T> »
Comment internationaliser des composants JSX à l’aide du composant « <T> »
Le composant « <T> » est l’outil principal pour internationaliser du contenu JSX dans votre application React. Il enveloppe vos éléments JSX et les traduit automatiquement en fonction du locale de l’utilisateur.
Démarrage rapide
Transformez n’importe quel contenu JSX statique en l’enveloppant avec <T> :
import { T } from 'gt-react';
// Avant
function Greeting() {
return <p>Hello, world!</p>;
}
// Après
function Greeting() {
return <T><p>Hello, world!</p></T>;
}Pour le contenu dynamique dans <T>, utilisez les composants Variables et les composants Branches.
Utilisation de base
Le composant <T> accepte n’importe quel contenu JSX comme children :
// Texte simple
<T>Bienvenue dans notre application</T>
// Éléments HTML
<T><h1>Titre de la page</h1></T>
// JSX imbriqué complexe
<T>
<div className="alert">
<span>Important :</span> Veuillez lire attentivement.
</div>
</T>Options de configuration
Ajout de contexte
Fournissez un contexte de traduction pour les termes ambigus :
<T context="notification popup, not bread">
Cliquez sur la notification pour la fermer
</T>Définition des identifiants de traduction
Utilisez des identifiants explicites pour garantir la cohérence des traductions :
<T id="welcome-message">
Bienvenue, utilisateur !
</T>Quand utiliser <T>
Utilisez <T> pour du contenu statique uniquement :
// ✅ Le contenu statique fonctionne
<T><button>Cliquez ici</button></T>
<T><h1>Bienvenue sur notre site</h1></T>
// ❌ Le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>
<T><p>Aujourd'hui c'est {new Date()}</p></T>
// ✅ Utilisez les composants Variable pour le contenu dynamique
<T>
<p>Bonjour <Var>{username}</Var></p>
</T>Les composants Variable et Branching sont conçus pour être utilisés à l’intérieur de <T> avec du contenu dynamique. Pour en savoir plus, consultez les guides Variable Components et Branching Components.
Exemples
Éléments simples
// Texte de base
<T>Bonjour, monde !</T>
// Bouton avec texte
<T><Button>Envoyer le formulaire</Button></T>
// Titre avec style
<T><h1 className="text-2xl font-bold">Bienvenue</h1></T>Composants complexes
// Menu de navigation
<T>
<nav className="navbar">
<a href="/about">À propos de nous</a>
<a href="/contact">Contact</a>
</nav>
</T>
// Message d'alerte
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Votre session expirera dans 5 minutes</span>
</div>
</T>Avec des variables
// Combinaison de texte statique avec des valeurs dynamiques
<T>
<p>Bienvenue, <Var>{user.name}</Var> !</p>
</T>
// Formulaire avec contenu mixte
<T>
<label>
E-mail : <input type="email" placeholder="Saisissez votre e-mail" />
</label>
</T>Pour en savoir plus sur le composant <Var>, consultez le guide des composants de variables.
Configuration en production
Processus de build
Ajoutez la traduction à votre pipeline de build :
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}Comportement en développement vs en production
- Développement : Avec une clé d’API de développement, les traductions se font à la demande lorsque les composants sont rendus. Vous verrez les traductions en temps réel pendant que vous développez.
- Production : Toutes les traductions sont pré‑générées lors de l’étape de build et seront visibles une fois votre application en ligne.
Définissez votre clé d’API de développement dans votre environnement pour activer la traduction en direct pendant le développement. Vous pouvez en créer une dans le tableau de bord, sous API Keys.
Considérations liées à la confidentialité
Le contenu des composants <T> est envoyé à l’API GT pour traduction. Pour les données sensibles, utilisez les Variable Components afin de conserver les informations privées en local :
// Sécurisé - les données sensibles restent en local
<T>
Bon retour, <Var>{username}</Var>
</T>Problèmes fréquents
Limites de composant
<T> ne traduit que ses children directs, pas le contenu à l’intérieur d’autres composants :
// ❌ Incorrect - le contenu à l'intérieur des composants ne sera pas traduit
function MyComponent() {
return <p>Ceci ne sera pas traduit</p>;
}
<T>
<h1>Ceci sera traduit</h1>
<MyComponent /> {/* Le contenu interne ne sera pas traduit */}
</T>
// ✅ Correct - enveloppez chaque composant individuellement
function MyComponent() {
return <T><p>Ceci sera traduit</p></T>;
}
<T><h1>Ceci sera traduit</h1></T>
<MyComponent />Imbrication de composants <T>
// ❌ N'imbriquez pas les composants <T>
<T>
<T>Hello world</T> {/* Ne faites pas cela */}
</T>Erreurs de contenu dynamique
La CLI signalera une Error pour le contenu dynamique dans <T>. Encapsulez les valeurs dynamiques avec des composants Variable :
// ❌ Incorrect - le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>
// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>Consultez le guide des composants Variables pour gérer les valeurs dynamiques, ainsi que le guide des composants à embranchements pour le contenu conditionnel.
Prochaines étapes
- Guide des composants variables - Gérer du contenu dynamique dans des traductions JSX
- Guide des composants à embranchements - Ajouter une logique conditionnelle à vos traductions
Comment trouvez-vous ce guide ?