<T>

Aperçu

Le composant <T> est la méthode principale de traduction dans gt-react.

<T id="example"> // [!code highlight]
    Aujourd'hui, je suis allé
    {" au magasin"}
    <p>
        pour <b>acheter</b> des <i>courses</i>.
    </p>
</T> 

Le composant <T> prend en charge la traduction de texte simple ainsi que de structures JSX complexes. De plus, il offre des fonctionnalités pour gérer les variables, les pluriels et les traductions spécifiques au contexte.

Référence

Props

Descriptions

Retours

React.JSX.Element|undefined qui contient la traduction rendue ou le contenu de secours basé sur la configuration fournie.

Comportement

Production

Pendant le processus de CD, tous les enfants à l'intérieur d'un <T> seront traduits avant que votre application ne soit déployée. Cela garantit des temps de chargement rapides pour toutes les locales, mais cela ne peut traduire que le contenu connu au moment de la construction.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) stockées dans le résultat de la construction de votre application, selon votre configuration. À partir de là, le contenu traduit est servi à vos utilisateurs. Si une traduction n'est pas trouvée, elle reviendra au contenu original.

Assurez-vous de suivre le guide de déploiement ici.

Développement

Pendant le développement, la fonction <T> traduira le contenu à la demande. C'est utile pour prototyper l'apparence de votre application dans différentes langues. N'oubliez pas d'ajouter une clé API de développement à votre environnement pour activer ce comportement.

Pendant le chargement, <T> retournera indéfini à moins que les langues soient similaires (en-US vs en-GB), bien que ce comportement puisse être personnalisé avec les paramètres de rendu. Si une erreur se produit, <T> retournera le contenu original.

Vous verrez un délai pendant la traduction à la demande en développement. Ce délai ne se produira pas lors des constructions de production car tout sera déjà traduit.

Exemples

Utilisation de base

Le composant <T> peut traduire des chaînes simples en utilisant un id et ses enfants. N'oubliez pas, le composant <T> doit être utilisé à l'intérieur d'un <GTProvider> pour accéder aux traductions.

import { T } from 'gt-react';
 
export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Bonjour, monde !
        </T> 
    );
}

Avec des variables

Le composant <T> peut inclure des variables pour le contenu dynamique dans les traductions.

import { T, Var } from 'gt-react';
 
export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Bonjour, <Var>{user.name}</Var> ! // [!code highlight]
        </T>
    );
}

Avec des pluriels

Le composant <T> prend également en charge la pluralisation en utilisant le composant <Plural>.

import { T, Plural } from 'gt-react';
 
export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Vous avez un article.</>}  
                plural={<>Vous avez des articles.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitations

Le composant <T> ne traduit pas le contenu qui est dynamique.

import { T } from 'gt-react';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // créera une erreur // [!code highlight]
        </T>
    );
}

La fonction <T> traduit ses descendants.

import { T } from 'gt-react';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>Pas de traduction</b></div>);
 
export default function Example() {
    return (
        <T>
            <div><b>Ceci est valide !</b></div> // sera traduit // [!code highlight]
 
            <ValidTranslation> // sera traduit // [!code highlight]
                Bonjour, monde ! // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // ne sera pas traduit
        </T>
    );
}

Notes

• Le composant <T> est conçu pour traduire le contenu de votre application. C'est la méthode principale pour la localisation dans gt-react.
• Utilisez le composant <T> pour traduire du texte simple ou des structures JSX, y compris les variables et la pluralisation.
• Assurez-vous que le composant <T> est enveloppé dans un <GTProvider> pour accéder au contexte de traduction.

Prochaines étapes

• Pour explorer des fonctionnalités plus avancées comme la traduction à la demande, les variables, le contexte et la gestion des pluriels, consultez la documentation des modèles de conception <T>.
• Pour traduire des chaînes, consultez useGT().
• Consultez l'utilisation des composants variables et l'utilisation des composants de branchement pour des modèles de traduction plus avancés.