<T>

Aperçu

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

<T>
    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 fournit 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>
            Hello, world!
        </T>
    );
}

Avec des variables

Vous pouvez utiliser le composant <Var> pour marquer les enfants comme des variables. Cela vous permet de marquer le contenu qui ne doit pas être traduit. Habituellement, les composants <Var> encapsulent du contenu dynamique.

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

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

Avec des pluriels

Le composant <T> prend également en charge la pluralisation en utilisant le 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.</>} 
            />
        </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 */}
        </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 */}

            
            <ValidTranslation>
                Hello, world!  {/* will be translated */}
            </ValidTranslation> 

            <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.