# General Translation Knowledge Base: ¿Cómo traduzco texto condicional en JSX? URL: https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: En lugar de traducir por separado cada rama de un operador ternario, envuelve la oración completa en un componente `` y expresa la condición con ``; así, el traductor ve el contexto completo y puede reordenar la oración según cada idioma. Category: Internacionalización 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. ## Introducción Uno de los errores más comunes que veo en la internacionalización es la tendencia a dividir expresiones ternarias simples en varias llamadas de traducción. Suele tener un aspecto parecido a este: ```jsx 'use client' import { T, useGT } from 'gt-react' export default function ThemeSetting({ enabled }) { const gt = useGT() return ( <> Dark Mode: ) } ``` En general, esto funciona como se espera. Antes de implementar la i18n, el código probablemente era algo así: `{ enabled ? 'On' : 'Off' }`. Añadir la función `gt()` para la i18n seguramente fue una simple extensión natural de la estructura de código existente. Cada vez que veo esto, se me revuelve un poco el estómago. No es en absoluto la forma en que se diseñó la biblioteca para usarse. Hay dos razones por las que esto es un error, sobre todo cuando se utiliza traducción automática: (1) el contexto y (2) la flexibilidad. ### Contexto El significado no reside únicamente en las palabras, sino también en la forma en que se presentan. La palabra "back" en una flecha de retroceso probablemente significa algo muy distinto a la palabra "back" (espalda) en el currículum de un quiropráctico. Además, sin un contexto más amplio, a los traductores (incluso a los humanos) les puede costar traducir la palabra correctamente. Hay una anécdota famosa sobre el departamento de i18n de WhatsApp, que tradujo al alemán la palabra "crop" (recortar) de una herramienta de edición de imágenes en su sentido agrícola, como "cosecha". Para resolver este problema de contexto, podemos proporcionar información sobre la presentación del contenido mediante los componentes [``](/docs/react/reference/components/t) y [``](/docs/react/reference/components/branch). En nuestro ejemplo, esto le daría a nuestro "traductor" una idea más clara de lo que significan "on" y "off". ```jsx Dark Mode: ``` ### Flexibilidad Además del contexto, otra forma interesante de aprovechar la traducción con LLM es a través de su comprensión del código. Veamos un ejemplo en el que el orden de los componentes puede cambiar según el idioma: ```jsx I eat lunch at . ``` Así, tenemos dos oraciones posibles: * "Almuerzo **en casa**" * "Almuerzo **en el trabajo**" En mandarín serían: * "我**在家**吃午餐" * "我**在公司**吃午餐" El componente [``](/docs/react/reference/components/t) detecta que aquí el orden de la oración debe cambiar y reorganiza sus hijos en consecuencia, algo que no resulta sencillo con operadores ternarios y traducción de cadenas. ```jsx 我在 吃午餐。 ``` ### Conclusión Si hay algo que debes llevarte de este artículo, es que siempre conviene buscar formas de aprovechar el contexto y la flexibilidad en tu código. Usar el componente [``](/docs/react/reference/components/branch) es probablemente una de las formas más sencillas de lograrlo. Consulta la documentación del [componente ``](/docs/react/reference/components/branch) para obtener más información. ## Related questions - [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx): No codifiques la lógica de pluralización a mano con comprobaciones como n === 1. Para aplicaciones solo en inglés basta con una pequeña función auxiliar, pero las aplicaciones multilingües necesitan reglas de pluralización adaptadas a la configuración regional, y un componente de i18n como `` de gt-react o gt-next se encarga de ellas en todos los idiomas. - [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Con gt-react o gt-next, el contenido se mantiene inline en tus componentes, dentro de un componente ``, y las traducciones se generan en tiempo de compilación, por lo que no tienes que escribir claves ni archivos JSON por configuración regional ni mantenerlos sincronizados. - [General Translation vs. vue-i18n: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-vue-i18n.mdx): General Translation permite a los equipos de Vue escribir el texto de origen directamente en las plantillas y generar traducciones con la CLI. Su plugin gt-vue renderiza ese contenido con formato de plurales y de números adaptado a la configuración regional. Elígelo si quieres dejar de mantener archivos de origen basados en claves; vue-i18n sigue siendo una buena opción para equipos que usan el módulo i18n de Nuxt y un flujo de trabajo de catálogos ya consolidado. ## Previous and next questions - Previous question: [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx) - Next question: [¿Cómo configuro el SEO de una aplicación de Next.js multilingüe?](https://generaltranslation.com/es/kb/multilingual-nextjs-seo.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.