Le composant <T>
Comment internationaliser des composants JSX à l’aide du composant <T>
Le composant <T> est l’outil principal pour internationaliser le contenu JSX dans votre application React. Il englobe vos éléments JSX et les traduit automatiquement en fonction de la 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>Bonjour, le monde !</p>;
}
// Après
function Greeting() {
return <T><p>Bonjour, le monde !</p></T>;
}Pour le contenu dynamique au sein de <T>, utilisez les composants Variable et les composants Branching.
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>Paramètres de configuration
Ajout de contexte
Fournissez du contexte de traduction pour les termes ambigus :
<T context="notification popup, not bread">
Cliquez sur la notification pour la fermer
</T>Définition des ID de traduction
Utilisez des ID explicites pour garantir des traductions cohérentes :
<T id="welcome-message">
Bon retour, utilisateur !
</T>Quand utiliser <T>
Utilisez <T> pour le 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>Nous sommes le {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
// Basic text
<T>Bonjour le monde !</T>
// Button with text
<T><Button>Envoyer le formulaire</Button></T>
// Heading with styling
<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 expire dans 5 minutes</span>
</div>
</T>Avec des variables
// Combinaison de texte statique avec des valeurs dynamiques
<T>
<p>Bon retour, <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 Variable.
Configuration de la production
Processus de build
Ajoutez la traduction à votre pipeline de build :
{
"scripts": {
"build": "npx gtx-cli translate && <...VOTRE_COMMANDE_DE_BUILD...>"
}
}Comportement en développement vs en production
- Développement: Avec une clé d’API de développement, les traductions s’effectuent à la demande au rendu des composants. Vous verrez les traductions en temps réel pendant le développement.
- 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 depuis le tableau de bord, sous API Keys.
Considérations relatives à 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 localement :
// Sécurisé - les données sensibles restent locales
<T>
Bon retour, <Var>{username}</Var>
</T>Problèmes fréquents
Limites des composants
<T> ne traduit que ses enfants 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 à l'intérieur 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 />Imbriquer des composants <T>
// ❌ N'imbriquez pas les composants <T>
<T>
<T>Hello world</T> {/* Ne faites pas cela */}
</T>Erreurs liées au contenu dynamique
La CLI renverra une Error pour tout contenu dynamique dans <T>. Encapsulez les valeurs dynamiques avec des composants Variable :
// ❌ Incorrect - le contenu dynamique casse
<T><p>Bonjour {username}</p></T>
// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>Consultez le guide des composants Variable pour gérer les valeurs dynamiques et le guide des composants Branching pour le contenu conditionnel.
Prochaines étapes
- Guide des composants Variable - Gérer du contenu dynamique dans des traductions JSX
- Guide des composants à embranchements - Ajouter une logique conditionnelle à vos traductions
Que pensez-vous de ce guide ?