<Tx>

Aperçu

Le composant <Tx> traduit le contenu jsx en temps réel.

<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> est 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. Le compromis est qu'il y a un délai en attendant qu'une traduction à la demande se charge, ce qui est significativement plus lent.

Pendant le chargement, <Tx> 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. Si une erreur se produit, <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 n'utiliser les traductions à la demande, comme <Tx> et tx() que lorsque c'est nécessaire.

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

Exemples

Utilisation de base

Le composant <Tx> traduira ses enfants au moment de 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 les enfants comme variables. Cela vous permet de marquer 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> // will be translated 
 
            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>
 
            <InvalidTranslation /> // will not be translated
        </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 brut ou des structures JSX, y compris les variables et la pluralisation.

Prochaines étapes

• Pour les traductions au moment de la construction, consultez le composant <T>.
• Consultez des fonctionnalités plus avancées, voir la Référence <T>.
• Pour traduire des chaînes, consultez tx(), getGT(), et useGT().
• Découvrez l'utilisation de composants variables et l'utilisation de composants conditionnels pour des modèles de traduction plus avancés.