# 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: Plutôt que de traduire séparément chaque branche d’un ternaire, encapsulez la phrase entière dans un composant `` et exprimez la condition avec `` : le traducteur dispose ainsi du contexte complet et peut réorganiser la phrase selon chaque langue. Category: Internationalisation Last updated: 2025-09-26 Authors: Ernest McCarter Published: 2025-09-26 ## 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. ## Introduction L'une des erreurs les plus courantes que je constate en internationalisation consiste à découper de simples expressions ternaires en plusieurs appels de traduction. Cela ressemble souvent à ceci : ```jsx 'use client' import { T, useGT } from 'gt-react' export default function ThemeSetting({ enabled }) { const gt = useGT() return ( <> Dark Mode: ) } ``` Dans l'ensemble, cela fonctionne comme prévu. Avant l'implémentation de l'i18n, le code ressemblait sans doute à quelque chose comme `{ enabled ? 'On' : 'Off' }`. L'ajout de la fonction `gt()` pour l'i18n n'était probablement qu'un prolongement naturel de la structure de code existante. Chaque fois que je vois ça, je ne peux m'empêcher de grimacer. Ce n'est pas du tout ainsi que la bibliothèque a été pensée. Deux arguments montrent pourquoi c'est une erreur, surtout lorsqu'on utilise la traduction automatique : (1) le contexte et (2) la flexibilité. ### Contexte Le sens ne réside pas uniquement dans les mots, mais aussi dans la manière dont ils sont présentés. Le mot "back" sur une flèche de retour n'a probablement pas du tout le même sens que le mot "back" (dos) sur le CV d'un chiropracteur. De plus, sans contexte plus large, les traducteurs (même humains) peuvent avoir du mal à traduire correctement un mot. On raconte souvent que le service i18n de WhatsApp aurait traduit en allemand le mot "crop" d'un outil d'édition d'images au sens agricole du terme (récolte), au lieu de « recadrer ». Pour contourner ce problème de contexte, nous pouvons transmettre des informations sur la présentation du contenu grâce aux composants [``](/docs/react/reference/components/t) et [``](/docs/react/reference/components/branch). Dans notre exemple, notre "traducteur" aurait ainsi une vision plus complète de ce que signifient "on" et "off". ```jsx Dark Mode: ``` ### Flexibilité Au-delà du contexte, la traduction par LLM présente un autre atout intéressant : sa compréhension du code. Prenons un exemple où l'ordre des composants peut varier selon la langue : ```jsx I eat lunch at . ``` Nous avons donc deux phrases possibles : * « Je déjeune **à la maison** » * « Je déjeune **au travail** » En mandarin, cela donnerait : * « 我**在家**吃午餐 » * « 我**在公司**吃午餐 » Le composant [``](/docs/react/reference/components/t) détecte qu'il faut ici modifier l'ordre des mots dans la phrase, et réorganise ses éléments enfants en conséquence, ce qui est difficilement réalisable avec des opérateurs ternaires et la traduction de chaînes. ```jsx 我在 吃午餐。 ``` ### Conclusion Si vous ne devez retenir qu'une chose de cet article, c'est qu'il faut toujours chercher à tirer parti du contexte et de la flexibilité dans votre code. Le composant [``](/docs/react/reference/components/branch) est sans doute l'un des moyens les plus simples d'y parvenir. Pour plus de détails, consultez la documentation du [composant ``](/docs/react/reference/components/branch). ## Related questions - [Comment gérer les formes plurielles dans React ?](https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx): Ne codez pas en dur la logique de pluralisation avec des tests comme n === 1. Un petit utilitaire suffit pour une application uniquement en anglais, mais une application multilingue a besoin de règles de pluriel adaptées au paramètre régional, que prend en charge pour chaque langue un composant i18n tel que `` de gt-react ou gt-next. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Avec gt-react ou gt-next, le contenu reste intégré dans vos composants, à l’intérieur d’un composant ``, et les traductions sont générées lors du build. Il n’y a donc ni clés ni fichiers JSON par paramètre régional à écrire et à garder synchronisés. - [Que faut-il vérifier avant de lancer une application multilingue ?](https://generaltranslation.com/fr/kb/multilingual-app-launch-checklist.mdx): Avant de lancer une application multilingue, testez neuf points dans chaque paramètre régional pris en charge : les parcours utilisateur complets, erreurs comprises, la détection de la langue et le changement de langue, les variables et les formes plurielles, la devise et les fuseaux horaires, l’expansion du texte, la mise en page right-to-left, l’accessibilité, la distribution des traductions en Production et des URL de langue explorables pour le SEO. Chaque vérification doit s’accompagner d’un critère de réussite explicite. ## Previous and next questions - Previous question: [Comment gérer les formes plurielles dans React ?](https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx) - Next question: [Comment configurer le SEO d’une application Next.js multilingue ?](https://generaltranslation.com/fr/kb/multilingual-nextjs-seo.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.