# General Translation Knowledge Base: Comment traduire du texte conditionnel en JSX ? URL: https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: Gardez la phrase entière et traduisez chacune de ses versions, car un ternaire la découpe en fragments qui perdent leur sens et leur place dans l’ordre des mots propre à chaque langue. General Translation y parvient avec `` à l’intérieur de ``, qui traduit la phrase d’un seul tenant. Category: Internationalisation Last updated: 2026-10-21 Authors: Ernest McCarter Published: 2025-09-26 Pour traduire du texte conditionnel en JSX (un texte choisi par un ternaire ou une autre condition), gardez la phrase entière et traduisez chacune de ses versions. Un ternaire comme `I eat lunch at {atHome ? 'home' : 'work'}.` découpe une phrase en fragments. Traduits isolément, « home » et « work » perdent la phrase qui leur donne leur sens, et le code les maintient à la fin de la phrase anglaise. Or l’ordre des mots varie d’une langue à l’autre : le chinois place le lieu avant le verbe, comme dans 我在家吃午餐 (« je déjeune à la maison »). | Approche | Points forts | Ce qui reste à votre charge | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Une bibliothèque d’internationalisation (i18n) seule (`i18next`, `react-intl`, `next-intl`) | Une clé de contexte par version (`i18next`) ou un message ICU (International Components for Unicode) `select` (`react-intl`, `next-intl`) regroupe toutes les versions de la phrase | Sortir la phrase du JSX pour la placer dans un fichier de clés, et rédiger chaque version dans chaque langue | | Google Translate | Traduction rapide et généraliste de texte, une chaîne de caractères à la fois | Rédiger chaque version sous forme de phrase complète, réintégrer les résultats dans le code, et tout recommencer à chaque modification du texte | | Une API d’IA brute (OpenAI API, Claude API) | Traduction fluide de la phrase entière, à condition de l’envoyer avec toutes ses versions | Rassembler chaque version et son contexte, garder une terminologie cohérente d’une livraison à l’autre, assurer la relecture et charger les résultats dans l’application | | General Translation ([``](/docs/react/reference/components/t) avec [``](/docs/react/reference/components/branch)) | [``](/docs/react/reference/components/t) traduit la phrase d’un seul tenant, avec toutes les versions réunies dans un même [``](/docs/react/reference/components/branch), et la formulation complète de chaque version peut varier selon la langue | Remplacer le ternaire par [``](/docs/react/reference/components/branch) (une correction automatique ESLint s’en charge dans [``](/docs/react/reference/components/t)), effectuer une configuration initiale unique, et relancer [`npx gt translate`](/docs/cli/reference/commands/translate) à chaque modification du texte | Utilisez un simple ternaire si l’application n’est livrée qu’en une seule langue. Optez pour une bibliothèque d’i18n seule si le texte se trouve déjà dans des fichiers de clés remplis par des traducteurs, et pour Google Translate ou une API d’IA brute s’il s’agit d’une phrase à traduire une seule fois. Utilisez [``](/docs/react/reference/components/branch) dans [``](/docs/react/reference/components/t) si la phrase se trouve dans le JSX et doit rester traduite au fil des modifications. Lorsqu’un nombre détermine la formulation, utilisez plutôt [``](/docs/react/reference/components/plural), car les règles de pluriel diffèrent selon la langue : l’anglais compte 2 formes, l’arabe 6. Les bibliothèques `gt-react` et `gt-next` de General Translation gèrent la condition avec le composant [``](/docs/react/reference/components/branch) placé dans [``](/docs/react/reference/components/t). Passez la valeur via `branch` (une chaîne de caractères, un nombre ou un booléen), ajoutez une prop pour chaque valeur, et placez le contenu de secours dans `children` : il s’affiche lorsqu’aucune prop ne correspond. Si la condition modifie la grammaire au-delà d’un seul mot, placez la phrase complète dans chaque branche, afin que les traducteurs puissent en adapter toute la formulation. Voici comment un ternaire intégré dans [``](/docs/react/reference/components/t) devient un [``](/docs/react/reference/components/branch) : ```tsx // Condition ternaire intégrée {isActive ? 'Active' : 'Inactive'}; // Branches traduisibles Inactive ; ``` Le plugin ESLint de General Translation, `@generaltranslation/react-core-linter`, signale tout opérateur ternaire placé dans [``](/docs/react/reference/components/t), et `npx eslint . --fix` le convertit en [``](/docs/react/reference/components/branch). Ensuite, [`npx gt translate`](/docs/cli/reference/commands/translate) traduit chaque [``](/docs/react/reference/components/t) dans tous les paramètres régionaux répertoriés dans `gt.config.json`. Le guide [Gérer les formes plurielles et les branches](/docs/react/guides/handling-plurals-and-branches) détaille toutes les étapes, et la [Vue d’ensemble React](/docs/react/overview#frameworks) renvoie vers le Démarrage rapide de chaque framework. ## Video The video is narrated in English, with English captions. [How do I translate conditional text in JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-conditional-jsx.mp4) (46 s) General Translation lets you wrap whole sentences in `T` and express conditions with `Branch`. Run `npx gt init`, choose Japanese and Chinese and sign in, put the sentence in a `T` component with a `Branch` so the translator sees it whole, then run `npx gt translate` to write Japanese and Chinese with the place before the verb. ## Comment traduire une phrase contenant une variable et un lien dans React ? Pour traduire une phrase contenant une variable et un lien, conservez la phrase, la variable et le texte du lien dans une seule entrée de traduction. Chaque langue reçoit ainsi la phrase complète et peut placer le nom et le lien là où sa grammaire l’exige. Découper `Hi {name}, read the terms of service before you continue.` en « Hi », « read the », « terms of service » et « before you continue » laisse aux traducteurs quatre fragments coupés de leur contexte, que le code assemble dans l’ordre des mots de l’anglais. | Approche | Comment la phrase signale le lien | Ce qui reste à votre charge | | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Une chaîne distincte pour chaque élément | Le texte du lien forme une chaîne de caractères à part | Des fragments coupés de leur contexte, dans l’ordre des mots de l’anglais | | react-i18next `` | Une balise numérotée comme `<3>terms of service`, ou une balise nommée issue de la prop `components` | Rédiger la chaîne dans chaque langue et renuméroter les balises à chaque modification du JSX | | react-intl `` | Une balise nommée comme `terms of service`, affichée par une fonction dans `values` | Rédiger le message dans chaque langue et maintenir la correspondance entre les noms de balises et `values` | | General Translation ([``](/docs/react/reference/components/t) avec [``](/docs/react/reference/components/var)) | Le lien, écrit en JSX directement dans la phrase | Une configuration initiale ponctuelle, puis relancer [`npx gt translate`](/docs/cli/reference/commands/translate) quand le texte change | Réservez les chaînes distinctes au texte qui ne fait pas partie d’une phrase, comme le libellé d’un bouton isolé. Optez pour `` de react-i18next ou `` de react-intl lorsque le texte se trouve déjà dans des fichiers de catalogue remplis par les traducteurs, et privilégiez les balises nommées, qui ne changent pas lorsque le JSX qui les entoure est modifié. Choisissez [``](/docs/react/reference/components/t) avec [``](/docs/react/reference/components/var) de General Translation lorsque la phrase se trouve dans le JSX et doit rester traduite au fil des modifications du texte. Les bibliothèques `gt-react` et `gt-next` de General Translation préservent l’intégrité de la phrase grâce à [``](/docs/react/reference/components/t) : encapsulez la phrase dans [``](/docs/react/reference/components/t), placez la valeur dynamique dans [``](/docs/react/reference/components/var) et écrivez le lien en JSX classique directement dans la phrase. ```tsx import { T, Var } from 'gt-react'; export function TermsNotice({ name }: { name: string }) { return (

Hi {name}, read the terms of service before you continue.

); } ``` Le composant [``](/docs/react/reference/components/t) de General Translation traduit le paragraphe comme une seule unité, texte du lien compris, et conserve l'élément `` ainsi que son `href` tels quels. [``](/docs/react/reference/components/var) affiche `name` sans le modifier, ne l'envoie jamais à l'API de General Translation et le place là où la phrase l'exige dans chaque paramètre régional. Si vous écrivez `{name}` sans [``](/docs/react/reference/components/var), la règle de lint [`static-jsx`](/docs/react/reference/lint-rules#static-jsx) de General Translation le signale, et `npx eslint . --fix` l'encapsule dans [``](/docs/react/reference/components/var). Avec l'App Router de Next.js, importez [``](/docs/react/reference/components/t) et [``](/docs/react/reference/components/var) depuis le package `gt-next` de General Translation et écrivez le lien avec [`Link` de `gt-next/link`](/docs/react/nextjs/link), qui ajoute le préfixe du paramètre régional aux URL internes : ainsi, `/terms` devient `/es/terms` pour un visiteur hispanophone. ## Comment le composant Trans de react-i18next et le composant T de General Translation gèrent-ils les éléments imbriqués ? Le composant `` de react-i18next affiche une phrase contenant des éléments React à partir d'une seule chaîne de caractères par langue, chaîne dans laquelle chaque élément est identifié par sa position parmi les éléments enfants de ``. Dans cette phrase, les éléments enfants sont le texte qui précède le nom, la valeur `name`, le texte qui précède le lien, le lien et le texte final ; le lien est donc l'enfant 3, en comptant à partir de 0 : ```tsx import { Trans } from 'react-i18next'; export function TermsNotice({ name }: { name: string }) { return ( Hi {{ name }}, read the terms of service before you continue. ); } ``` ```json title="locales/en/translation.json" { "termsNotice": "Hi {{name}}, read the <3>terms of service before you continue." } ``` Un élément imbriqué dans un autre élément est numéroté parmi les éléments enfants de ce parent. Les éléments sans attributs figurant dans une courte liste par défaut (`
`, ``, `` et `

`) conservent leur propre nom dans la chaîne de caractères. La prop `components` remplace les numéros par des noms : avec `components={{ termsLink: }}`, la chaîne de caractères devient `terms of service`. Le `` de react-intl utilise lui aussi des noms : le message contient `terms of service`, et `values` associe `link` à une fonction qui renvoie l’élément ``. Lorsque des éléments imbriqués ne sont plus traduits avec ``, c’est généralement que la chaîne de caractères et le JSX ne correspondent plus. Ajouter ou supprimer un enfant avant le lien décale tous les numéros suivants, ce qui oblige à renuméroter la chaîne de caractères dans chaque langue. Un numéro qui pointe vers le mauvais enfant affiche le mauvais contenu ou fait disparaître le lien, et une balise nommée absente de `components` s’affiche telle quelle, sous forme de texte brut. Avec le composant [``](/docs/react/reference/components/t) de General Translation, vous n’écrivez aucune chaîne de traduction et n’avez aucun numéro à garder synchronisé. Le JSX placé entre les balises [``](/docs/react/reference/components/t) constitue la source : General Translation identifie l’entrée à partir de son contenu et enregistre chaque élément imbriqué avec sa balise et un identifiant interne qu’il attribue lui-même. Le texte de tout élément écrit entre les balises [``](/docs/react/reference/components/t) est traduit avec le reste de la phrase, quel que soit son niveau d’imbrication, comme dans cet exemple tiré de la [référence ``](/docs/react/reference/components/t#overview) de General Translation : ```tsx Today, I went to

the store to buy some groceries.

``` Le composant [``](/docs/react/reference/components/t) de General Translation ne traduit que le contenu écrit littéralement entre ses balises : un composant enfant qui affiche son propre texte en interne, comme `