# 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: Mantén la oración completa y traduce cada una de sus versiones, porque un ternario la divide en fragmentos que pierden su significado y su lugar en el orden de palabras de cada idioma. General Translation lo resuelve con `` dentro de ``, que traduce la oración como una sola unidad. Category: Internacionalización Last updated: 2026-10-21 Authors: Ernest McCarter Published: 2025-09-26 Para traducir texto condicional en JSX (el texto que elige un ternario u otra condición), mantén la oración completa y traduce cada una de sus versiones. Un ternario como `I eat lunch at {atHome ? 'home' : 'work'}.` divide una oración en fragmentos. Traducidos por separado, "home" y "work" pierden la oración que les da sentido, y el código los deja al final de la oración en inglés. El orden de las palabras cambia según el idioma: el chino coloca el lugar antes del verbo, como en 我在家吃午餐 ("Almuerzo en casa"). | Enfoque | Lo que hace bien | Lo que te deja a ti | | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Solo una biblioteca de internacionalización (i18n) (`i18next`, `react-intl`, `next-intl`) | Una clave de contexto por versión (`i18next`) o un mensaje `select` de ICU (International Components for Unicode) (`react-intl`, `next-intl`) reúne todas las versiones de la oración | Sacar la oración de JSX a un archivo de claves y escribir cada versión en cada idioma | | Google Translate | Traducción rápida y de uso general, cadena por cadena | Escribir cada versión como una oración completa, volver a insertar los resultados en el código y repetir ambos pasos cada vez que cambia el texto | | Una API de IA directa (OpenAI API, Claude API) | Traducción fluida de la oración completa, si la envías con todas sus versiones | Reunir cada versión y su contexto, mantener la coherencia terminológica entre lanzamientos, revisar y cargar los resultados en la app | | General Translation ([``](/docs/react/reference/components/t) con [``](/docs/react/reference/components/branch)) | [``](/docs/react/reference/components/t) traduce la oración como una sola unidad, con todas las versiones dentro de un único [``](/docs/react/reference/components/branch), y la redacción completa de cada versión puede variar según el idioma | Reemplazar el ternario por [``](/docs/react/reference/components/branch) (una corrección automática de ESLint lo hace dentro de [``](/docs/react/reference/components/t)), una configuración inicial única y volver a ejecutar [`npx gt translate`](/docs/cli/reference/commands/translate) cuando cambia el texto | Usa un ternario simple si la app se publica en un solo idioma. Usa solo una biblioteca de i18n si el texto ya está en archivos de claves que completan los traductores, y Google Translate o una API de IA directa para una oración que traduces una sola vez. Usa [``](/docs/react/reference/components/branch) dentro de [``](/docs/react/reference/components/t) cuando la oración está en JSX y debe seguir traducida a medida que cambia el texto. Si es un número lo que determina la redacción, usa [``](/docs/react/reference/components/plural), porque las reglas de plural varían según el idioma: el inglés tiene 2 formas y el árabe, 6. Las bibliotecas `gt-react` y `gt-next` de General Translation gestionan la condición con el componente [``](/docs/react/reference/components/branch) dentro de [``](/docs/react/reference/components/t). Pasa el valor como `branch` (una cadena, un número o un booleano), añade una prop por cada valor y coloca el contenido alternativo en `children`, que se renderiza cuando ninguna prop coincide. Si la condición afecta a la gramática más allá de una palabra, coloca la oración completa en cada rama para que los traductores puedan adaptar toda su redacción. Así se convierte un ternario inline dentro de [``](/docs/react/reference/components/t) en un [``](/docs/react/reference/components/branch): ```tsx // Condicional inline {isActive ? 'Active' : 'Inactive'}; // Ramas traducibles Inactive ; ``` El plugin de ESLint de General Translation, `@generaltranslation/react-core-linter`, detecta los operadores ternarios dentro de [``](/docs/react/reference/components/t), y `npx eslint . --fix` los convierte en un componente [``](/docs/react/reference/components/branch). Después, [`npx gt translate`](/docs/cli/reference/commands/translate) traduce cada [``](/docs/react/reference/components/t) a todas las configuraciones regionales definidas en `gt.config.json`. En [Gestión de plurales y ramas](/docs/react/guides/handling-plurals-and-branches) encontrarás todos los pasos, y en la [descripción general de React](/docs/react/overview#frameworks) tienes los enlaces al Inicio rápido de cada 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. ## ¿Cómo traduzco una oración con una variable y un enlace en React? Para traducir una oración que contiene una variable y un enlace, mantén la oración, la variable y el texto del enlace en una sola entrada de traducción. Así, cada idioma recibe la oración completa y puede colocar el nombre y el enlace donde lo exija su gramática. Si divides `Hi {name}, read the terms of service before you continue.` en "Hi", "read the", "terms of service" y "before you continue", los traductores reciben cuatro fragmentos sin el contexto de la oración, y el código los deja fijados en el orden de palabras del inglés. | Enfoque | Cómo marca la oración el enlace | Lo que queda a tu cargo | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Cadenas separadas para cada fragmento | El texto del enlace es una cadena aparte | Fragmentos sin el contexto de la oración, en el orden de palabras del inglés | | react-i18next `` | Una etiqueta numerada como `<3>terms of service`, o una etiqueta con nombre definida en la prop `components` | Escribir la cadena en cada idioma y renumerar las etiquetas cuando cambia el JSX | | react-intl `` | Una etiqueta con nombre como `terms of service`, renderizada por una función en `values` | Escribir el mensaje en cada idioma y mantener los nombres de las etiquetas sincronizados con `values` | | General Translation ([``](/docs/react/reference/components/t) con [``](/docs/react/reference/components/var)) | El enlace, escrito como JSX dentro de la oración | Una configuración inicial única y volver a ejecutar [`npx gt translate`](/docs/cli/reference/commands/translate) cuando cambia el texto | Usa cadenas separadas solo para texto que no forma parte de una oración, como la etiqueta de un botón independiente. Usa `` de react-i18next o `` de react-intl cuando el texto ya está en archivos de catálogo que completan los traductores, y da preferencia a las etiquetas con nombre, que no cambian aunque cambie el JSX que las rodea. Usa [``](/docs/react/reference/components/t) con [``](/docs/react/reference/components/var) de General Translation cuando la oración está en JSX y debe seguir traducida a medida que cambia el texto. Las bibliotecas `gt-react` y `gt-next` de General Translation mantienen la oración completa con [``](/docs/react/reference/components/t): envuelve la oración en [``](/docs/react/reference/components/t), coloca el valor dinámico en [``](/docs/react/reference/components/var) y escribe el enlace como JSX normal dentro de la oración. ```tsx import { T, Var } from 'gt-react'; export function TermsNotice({ name }: { name: string }) { return (

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

); } ``` [``](/docs/react/reference/components/t) de General Translation traduce el párrafo como una sola unidad, incluido el texto del enlace, y conserva el elemento `` y su `href` tal como están escritos. [``](/docs/react/reference/components/var) renderiza `name` sin modificarlo, nunca lo envía a la API de General Translation y lo coloca donde lo requiera la oración en cada configuración regional. Si escribes `{name}` sin [``](/docs/react/reference/components/var), la regla de lint [`static-jsx`](/docs/react/reference/lint-rules#static-jsx) de General Translation lo detecta, y `npx eslint . --fix` lo envuelve en [``](/docs/react/reference/components/var). En el App Router de Next.js, importa [``](/docs/react/reference/components/t) y [``](/docs/react/reference/components/var) desde `gt-next` de General Translation y escribe el enlace con [`Link` de `gt-next/link`](/docs/react/nextjs/link), que agrega el prefijo de configuración regional a las URL internas; así, `/terms` se convierte en `/es/terms` para un visitante hispanohablante. ## ¿Cómo gestionan los elementos anidados el Trans de react-i18next y el T de General Translation? El componente `` de react-i18next renderiza una oración que contiene elementos de React a partir de una sola cadena por idioma, y en esa cadena cada elemento se identifica por su posición entre los hijos de ``. En esta oración, los hijos son el texto que precede al nombre, el valor `name`, el texto que precede al enlace, el enlace y el texto final, así que el enlace es el hijo 3 (contando desde 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 elemento anidado dentro de otro elemento se numera entre los hijos de ese elemento padre. Los elementos sin atributos que figuran en una breve lista predeterminada (`
`, ``, `` y `

`) conservan sus propios nombres en la cadena. La prop `components` sustituye los números por nombres: con `components={{ termsLink: }}`, la cadena queda así: `terms of service`. El `` de react-intl también usa nombres: el mensaje contiene `terms of service` y `values` asigna `link` a una función que devuelve el elemento ``. Cuando los elementos anidados dejan de traducirse con ``, lo habitual es que la cadena y el JSX no coincidan. Si se agrega o se quita un hijo antes del enlace, se desplazan todos los números posteriores, así que hay que renumerar la cadena en todos los idiomas. Un número que apunta al hijo equivocado renderiza contenido incorrecto o hace desaparecer el enlace, y una etiqueta con nombre que falta en `components` se renderiza como texto literal. Con [``](/docs/react/reference/components/t) de General Translation, no escribes ninguna cadena de traducción ni tienes que mantener números sincronizados. El JSX entre las etiquetas [``](/docs/react/reference/components/t) es el origen: General Translation identifica la entrada a partir de su contenido y registra cada elemento anidado con su etiqueta y un identificador interno que asigna automáticamente. El texto dentro de cualquier elemento escrito entre las etiquetas [``](/docs/react/reference/components/t) se traduce junto con el resto de la oración, sea cual sea su nivel de anidamiento, como en este ejemplo de la [referencia de ``](/docs/react/reference/components/t#overview) de General Translation: ```tsx Today, I went to

the store to buy some groceries.

``` El componente [``](/docs/react/reference/components/t) de General Translation solo traduce el contenido escrito literalmente entre sus etiquetas, por lo que el [``](/docs/react/reference/components/t) que lo envuelve no traduce un componente hijo que renderiza su propio texto internamente, como `