<T>

Aperçu

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

<T> // [!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 affichée 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 dans 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'apparaîtra pas lors des builds de production sauf si le contenu est explicitement traduit à la demande, c'est-à-dire en utilisant <Tx> ou tx().

Exemples

Utilisation de base

Le <T> traduira ses enfants.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T> // [!code highlight]
            Hello, world!
        </T> 
    );
}

Avec des variables

Vous pouvez utiliser le composant <Var> pour marquer les enfants comme des variables. Cela vous permet d'indiquer le contenu qui ne doit pas être traduit. En général, les composants <Var> enveloppent du contenu dynamique.

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

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

Avec des pluriels

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

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

export default function ItemCount({ count }) {
    return (
        <T>
            <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-next';

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-next';

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-next.
• Utilisez le composant <T> pour traduire du texte simple ou des structures JSX, y compris les variables et la pluralisation.
• Si vous utilisez le composant <T> côté client, assurez-vous qu'il soit inclus dans un <GTProvider> afin d'accéder au contexte de traduction.

Prochaines étapes

• Pour des traductions à la demande, consultez le composant <Tx>.
• Pour découvrir des fonctionnalités plus avancées, consultez la référence <T>.
• Pour traduire des chaînes de caractères, consultez tx(), getGT(), et useGT().
• Découvrez l'utilisation de composants de variables et l'utilisation de composants conditionnels pour des schémas de traduction plus avancés.