# General Translation Knowledge Base: Как перевести условный текст в JSX?
URL: https://generaltranslation.com/ru/kb/translate-conditional-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Не переводите каждую ветвь тернарного оператора по отдельности — оберните всё предложение в компонент `<T>` и задайте условие с помощью `<Branch>`. Так переводчик увидит полный контекст и сможет перестроить предложение для каждого языка.
Category: Интернационализация
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 с)

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.

## Введение

Одна из самых распространённых ошибок, которые я встречаю при интернационализации, — привычка
разбивать простые тернарные выражения на несколько вызовов перевода.
Обычно это выглядит примерно так:

```jsx
'use client'

import { T, useGT } from 'gt-react'

export default function ThemeSetting({ enabled }) {
  const gt = useGT()

  return (
    <>
      <span>
        <T>Dark Mode:</T>
      </span>
      <button>{enabled ? gt('On') : gt('Off')}</button>
    </>
  )
}
```

В целом это работает как задумано. До внедрения i18n код, скорее всего, выглядел примерно так: `{ enabled ? 'On' : 'Off' }`.
Добавление функции `gt()` для i18n, вероятно, было просто естественным развитием существующей структуры кода.

Каждый раз, когда я вижу такое, меня слегка передёргивает. Библиотека совсем не рассчитана на такое использование.
Это ошибка — особенно если речь идёт о машинном переводе, — и на то есть две причины: (1) контекст и (2) гибкость.

### Контекст

Смысл заключён не только в самих словах, но и в том, как они представлены.
Слово «back» на кнопке со стрелкой «назад», скорее всего, означает совсем не то, что слово «back» («спина») в резюме мануального терапевта.
Кроме того, без более широкого контекста переводчикам (даже живым людям) бывает трудно правильно перевести слово.
Известна история о том, как отдел i18n WhatsApp перевёл на немецкий слово «crop» («обрезать») в редакторе изображений как «crop» в значении «урожай».

Чтобы решить проблему с контекстом, можно передавать информацию о том, как представлен контент, с помощью компонентов [`<T>`](/docs/react/reference/components/t) и [`<Branch>`](/docs/react/reference/components/branch).
В нашем примере это даст «переводчику» более полное представление о том, что означают «on» и «off».

```jsx
<T>
  <span>Dark Mode:</span>
  <button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </button>
</T>
```

### Гибкость

Помимо контекста, у перевода с помощью LLM есть ещё одно интересное преимущество — модель понимает код.
Рассмотрим пример, в котором порядок компонентов может меняться в зависимости от языка:

```jsx
<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>
```

Итак, у нас есть два возможных предложения:

* &quot;Я обедаю **дома**&quot;
* &quot;Я обедаю **на работе**&quot;

На китайском (путунхуа) это будет:

* &quot;我**在家**吃午餐&quot;
* &quot;我**在公司**吃午餐&quot;

Компонент [`<T>`](/docs/react/reference/components/t) понимает, что здесь нужно изменить порядок слов, и соответствующим образом переставляет свои дочерние элементы
— с тернарными операторами и переводом строк добиться этого не так просто.

```jsx
<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>
```

### Заключение

Главный вывод из этой статьи: всегда ищите способы использовать контекст и гибкость в своём коде.
Компонент [`<Branch />`](/docs/react/reference/components/branch) — пожалуй, один из самых простых способов это сделать.

Подробнее см. в документации по [компоненту `<Branch />`](/docs/react/reference/components/branch).

## Related questions

- [Как работать с формами множественного числа в React?](https://generaltranslation.com/ru/kb/how-to-handle-plurals-in-react.mdx): Не зашивайте логику выбора формы множественного числа в код с помощью проверок вроде n === 1. Для приложений только на английском хватит небольшой вспомогательной функции, но многоязычным приложениям нужны locale-aware правила множественного числа. С ними для любого языка справляется i18n-компонент, например `<Plural>` из gt-react или gt-next.
- [Можно ли реализовать i18n без файлов перевода?](https://generaltranslation.com/ru/kb/i18n-without-translation-files.mdx): Да. С gt-react или gt-next контент остаётся встроенным прямо в ваши компоненты внутри компонента `<T>`, а переводы генерируются во время сборки, поэтому не нужно писать ключи и JSON-файлы для каждой локали и следить за их синхронизацией.
- [Что проверить перед запуском многоязычного приложения?](https://generaltranslation.com/ru/kb/multilingual-app-launch-checklist.mdx): Перед запуском многоязычного приложения проверьте девять аспектов в каждой поддерживаемой локали: пользовательские сценарии целиком, включая ошибки; определение и переключение языка; переменные и формы множественного числа; валюту и часовые пояса; увеличение длины текста; вёрстку для языков с письмом справа налево; доступность; доставку переводов в рабочей среде; индексируемые языковые URL для SEO. Для каждой проверки нужен явный критерий успешного прохождения.

## Previous and next questions

- Previous question: [Как работать с формами множественного числа в React?](https://generaltranslation.com/ru/kb/how-to-handle-plurals-in-react.mdx)
- Next question: [Как настроить SEO для многоязычного приложения Next.js?](https://generaltranslation.com/ru/kb/multilingual-nextjs-seo.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.