<T>

Aperçu

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

<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> 

Le composant <T> prend en charge la traduction de texte brut 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 selon la configuration fournie.

Comportement

Production

Pendant le processus de CD, tous les enfants à l'intérieur d'un <T> seront traduits avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour toutes les langues, 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 sur le CDN, soit (2) stockées dans le résultat de build de votre application, selon votre configuration. À partir de là, le contenu traduit est servi à vos utilisateurs. Si une traduction n'est pas trouvée, le contenu original sera utilisé par défaut.

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

Développement

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

Pendant le chargement, <T> retournera undefined à moins que les langues soient similaires (en-US vs en-GB), bien que ce comportement puisse être personnalisé avec les paramètres de rendu. En cas d'erreur, <T> retournera le contenu original.

Vous constaterez un délai lors de la traduction à la demande en développement. Ce délai n'aura pas lieu lors des builds 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]
            Hello, world!
        </T> 
    );
}

Avec variables

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

import { T, Var } from 'gt-react';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Avec pluriels

Le composant <T> prend également en charge la pluralisation à l'aide du composant <Plural>.

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  // [!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} // will create an error // [!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>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // will be translated // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // will not be translated
        </T>
    );
}

Notes

• Le composant <T> est conçu pour traduire le contenu de votre application. Il s'agit de 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 inclus dans un <GTProvider> afin d'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 du pluriel, consultez la documentation sur les Design Patterns <T>.
• Pour la traduction de chaînes, consultez useGT().
• Découvrez l'utilisation des composants de variable et l'utilisation des composants de branchement pour des modèles de traduction plus avancés.