# General Translation Knowledge Base: Как перевести условный текст в JSX? URL: https://generaltranslation.com/ru/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: Не разбивайте предложение и переводите каждый его вариант целиком, ведь тернарный оператор дробит его на фрагменты, которые теряют смысл и своё место в порядке слов каждого языка. В General Translation для этого используется `` внутри ``, который переводит предложение как единое целое. Category: Интернационализация Last updated: 2026-10-21 Authors: Ernest McCarter Published: 2025-09-26 Чтобы перевести условный текст в JSX (текст, который выбирается тернарным оператором или другим условием), не разбивайте предложение и переводите каждый его вариант целиком. Тернарный оператор вроде `I eat lunch at {atHome ? 'home' : 'work'}.` дробит одно предложение на фрагменты. При отдельном переводе слова "home" и "work" оторваны от предложения, которое придаёт им смысл, а код оставляет их в конце, как в английском. Однако порядок слов в разных языках разный: в китайском место ставится перед глаголом, например 我在家吃午餐 ("Я обедаю дома"). | Подход | Сильные стороны | Что остаётся на вас | | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Только библиотека интернационализации (i18n) (`i18next`, `react-intl`, `next-intl`) | Все варианты предложения хранятся в отдельных контекстных ключах (`i18next`) или в сообщении ICU (International Components for Unicode) `select` (`react-intl`, `next-intl`) | Перенос предложения из JSX в файл ключей и написание каждого варианта на каждом языке | | Google Translate | Быстрый универсальный перевод текста, по одной строке за раз | Запись каждого варианта полным предложением, перенос результатов обратно в код и повторение всего этого при каждом изменении текста | | Прямой вызов AI API (OpenAI API, Claude API) | Естественный перевод всего предложения, если отправить его со всеми вариантами | Сбор всех вариантов и их контекста, единообразие терминов от релиза к релизу, вычитка и загрузка результатов в приложение | | General Translation ([``](/docs/react/reference/components/t) с [``](/docs/react/reference/components/branch)) | [``](/docs/react/reference/components/t) переводит предложение как единое целое, все варианты собраны в одном [``](/docs/react/reference/components/branch), а формулировка каждого варианта может полностью меняться в зависимости от языка | Замена тернарного оператора на [``](/docs/react/reference/components/branch) (внутри [``](/docs/react/reference/components/t) это делает автоисправление ESLint), разовая настройка и повторный запуск [`npx gt translate`](/docs/cli/reference/commands/translate) при изменении текста | Обычного тернарного оператора достаточно, если приложение выходит только на одном языке. Одной библиотеки i18n хватит, если текст уже хранится в файлах ключей, которые заполняют переводчики, а Google Translate или прямой вызов AI API подойдут для предложения, которое нужно перевести один раз. Используйте [``](/docs/react/reference/components/branch) внутри [``](/docs/react/reference/components/t), если предложение находится в JSX и перевод должен оставаться актуальным при изменении текста. Если формулировка зависит от числа, используйте [``](/docs/react/reference/components/plural), поскольку правила множественного числа в языках различаются: в английском 2 формы, а в арабском — 6. В библиотеках `gt-react` и `gt-next` от General Translation условие обрабатывается компонентом [``](/docs/react/reference/components/branch) внутри [``](/docs/react/reference/components/t). Передайте значение в `branch` (строку, число или логическое значение), добавьте по пропу для каждого значения и поместите резервный вариант в `children` — он рендерится, если ни один проп не подошёл. Если условие затрагивает грамматику не одного слова, а всего предложения, помещайте в каждую ветвь предложение целиком, чтобы переводчики могли адаптировать всю формулировку. Встроенный тернарный оператор внутри [``](/docs/react/reference/components/t) превращается в [``](/docs/react/reference/components/branch) так: ```tsx // Встроенное условное выражение {isActive ? 'Active' : 'Inactive'}; // Переводимые ветви Inactive ; ``` ESLint-плагин General Translation `@generaltranslation/react-core-linter` помечает тернарный оператор внутри [``](/docs/react/reference/components/t), а команда `npx eslint . --fix` преобразует его в [``](/docs/react/reference/components/branch). Затем [`npx gt translate`](/docs/cli/reference/commands/translate) переводит каждый [``](/docs/react/reference/components/t) на все локали, перечисленные в `gt.config.json`. Пошаговые инструкции приведены в руководстве [Работа с формами множественного числа и ветвями](/docs/react/guides/handling-plurals-and-branches), а в [обзоре React](/docs/react/overview#frameworks) есть ссылки на «Быстрый старт» для каждого фреймворка. ## 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 с) 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. ## Как перевести предложение с переменной и ссылкой в React? Чтобы перевести предложение с переменной и ссылкой, храните само предложение, переменную и текст ссылки в одной записи перевода. Тогда для каждого языка предложение доступно целиком, и имя со ссылкой можно поставить туда, где этого требует грамматика. Если разбить `Hi {name}, read the terms of service before you continue.` на «Hi», «read the», «terms of service» и «before you continue», переводчики получат четыре фрагмента без контекста предложения, а в коде сохранится английский порядок слов. | Подход | Как в предложении обозначена ссылка | Что остаётся на вас | | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Отдельные строки для каждой части | Текст ссылки — отдельная строка | Фрагменты без контекста предложения, в английском порядке слов | | react-i18next `` | Нумерованный тег, например `<3>terms of service`, или именованный тег из пропа `components` | Написание строки на каждом языке и перенумерация тегов при изменении JSX | | react-intl `` | Именованный тег, например `terms of service`, который рендерится функцией из `values` | Написание сообщения на каждом языке и поддержание соответствия имён тегов ключам `values` | | General Translation ([``](/docs/react/reference/components/t) с [``](/docs/react/reference/components/var)) | Ссылка в виде JSX прямо внутри предложения | Однократная настройка и повторный запуск [`npx gt translate`](/docs/cli/reference/commands/translate) при изменении текста | Используйте отдельные строки только для текста, который не входит в предложение, например для автономной подписи кнопки. Используйте `` из react-i18next или `` из react-intl, если текст уже хранится в файлах каталогов, которые заполняют переводчики, и отдавайте предпочтение именованным тегам — они не меняются при изменении окружающего JSX. Используйте [``](/docs/react/reference/components/t) с [``](/docs/react/reference/components/var) от General Translation, если предложение находится в JSX и перевод должен оставаться актуальным при изменении текста. Библиотеки `gt-react` и `gt-next` от General Translation сохраняют предложение целиком с помощью [``](/docs/react/reference/components/t): оберните предложение в [``](/docs/react/reference/components/t), поместите динамическое значение в [``](/docs/react/reference/components/var) и запишите ссылку как обычный JSX внутри предложения. ```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) от General Translation переводит абзац целиком, включая текст ссылки, и оставляет элемент `` и его `href` без изменений. [``](/docs/react/reference/components/var) выполняет рендеринг `name` как есть, никогда не отправляет это значение в API General Translation и подставляет его туда, где оно должно стоять в предложении на каждой локали. Если написать `{name}` без [``](/docs/react/reference/components/var), правило линтера [`static-jsx`](/docs/react/reference/lint-rules#static-jsx) от General Translation отметит это место как ошибку, а `npx eslint . --fix` обернёт его в [``](/docs/react/reference/components/var). В Next.js App Router импортируйте [``](/docs/react/reference/components/t) и [``](/docs/react/reference/components/var) из пакета `gt-next` от General Translation, а ссылку оформляйте с помощью [`Link` из `gt-next/link`](/docs/react/nextjs/link): этот компонент добавляет префикс локали к внутренним URL, так что для посетителя из Испании `/terms` превращается в `/es/terms`. ## Как Trans из react-i18next и T из General Translation обрабатывают вложенные элементы? Компонент `` из react-i18next выполняет рендеринг предложения с React-элементами на основе одной строки для каждого языка. В этой строке каждый элемент обозначается своей позицией среди дочерних элементов ``. В этом предложении дочерние элементы — это текст перед именем, значение `name`, текст перед ссылкой, сама ссылка и завершающий текст. Значит, ссылка — дочерний элемент с индексом 3 (отсчёт ведётся с 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." } ``` Элемент, вложенный в другой элемент, получает номер среди дочерних элементов своего родителя. Элементы без атрибутов из короткого списка по умолчанию (`
`, ``, `` и `

`) сохраняют в строке собственные имена. Проп `components` заменяет номера именами: с `components={{ termsLink: }}` строка выглядит как `terms of service`. `` из react-intl тоже использует имена: сообщение содержит `terms of service`, а `values` сопоставляет `link` с функцией, которая возвращает элемент ``. Если вложенные элементы в `` перестают переводиться, обычно это означает, что строка и JSX не совпадают. Стоит добавить или удалить дочерний элемент перед ссылкой — и все последующие номера сдвигаются, поэтому строку приходится перенумеровывать на каждом языке. Номер, указывающий не на тот дочерний элемент, приводит к рендерингу не того содержимого или к потере ссылки, а именованный тег, отсутствующий в `components`, выводится как обычный текст. С [``](/docs/react/reference/components/t) от General Translation не нужно ни писать строку перевода, ни следить за синхронизацией номеров. Источником служит сам JSX между тегами [``](/docs/react/reference/components/t): General Translation определяет запись по её содержимому и сохраняет каждый вложенный элемент вместе с его тегом и внутренним идентификатором, который General Translation назначает сам. Текст внутри любого элемента между тегами [``](/docs/react/reference/components/t) переводится вместе с остальным предложением на любом уровне вложенности — как в этом примере из [справочника по ``](/docs/react/reference/components/t#overview) General Translation: ```tsx Today, I went to

the store to buy some groceries.

``` Компонент [``](/docs/react/reference/components/t) от General Translation переводит только содержимое, написанное непосредственно между его тегами. Поэтому дочерний компонент, который сам выполняет рендеринг своего текста, например `