<Tx>

Aperçu

Le composant <Tx> traduit le contenu jsx à l'exécution.

<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> 

Le composant <Tx> 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. <Tx> fonctionne uniquement côté serveur.

Référence

Props

Descriptions

Comportement

<Tx> traduit le jsx à l'exécution. Cela signifie que les traductions sont effectuées en direct, vous pouvez donc traduire du contenu qui n'est connu qu'à l'exécution. La contrepartie est qu'il y a un délai, car l'attente du chargement d'une traduction à la demande est nettement plus lente.

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

Notre conseil est de traduire tout ce que vous pouvez au moment de la construction en utilisant <T>, getGT(), ou useGT(), et d'utiliser uniquement les traductions à la demande, comme <Tx> et tx() lorsque cela est nécessaire.

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

Exemples

Utilisation de base

Le composant <Tx> traduira ses enfants à l'exécution.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </Tx> 
    );
}

Avec des variables

Vous pouvez utiliser le composant <Var> pour marquer des enfants comme des variables. Cela vous permet d'indiquer le contenu qui ne doit pas être traduit.

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

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

Avec des pluriels

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

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

Limitations

La fonction <Tx> ne traduit que ses descendants.

import { Tx } 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 (
        <Tx>
            <div><b>This is valid!</b></div> // sera traduit 

            <ValidTranslation> // sera traduit 
                Hello, world!
            </ValidTranslation>

            <InvalidTranslation /> // ne sera pas traduit
        </Tx>
    );
}

Notes

• Le composant <Tx> est conçu pour traduire le contenu de votre application à l'exécution.
• Utilisez le composant <Tx> pour traduire du texte simple ou des structures JSX, y compris des variables et la pluralisation.

Prochaines étapes

• Pour les traductions au moment de la construction, consultez le composant <T>.
• 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 variables et l'utilisation de composants conditionnels pour des schémas de traduction plus avancés.