# General Translation React SDKs (gt-react, gt-next): Перевод JSX
URL: https://generaltranslation.com/ru/docs/react/guides/translating-jsx.mdx
---

title: Перевод JSX
description: Как переводить JSX на месте с помощью компонента <T> от General Translation в React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

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

Компонент работает одинаково во всех фреймворках; меняется только пакет импорта.

## Оберните содержимое в `<T>` [#wrap]

Оберните в него любой JSX с пользовательским текстом. Вложенная разметка и элементы сохраняются при переводе.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *Примечание: в Next.js `<T>` работает и в серверных, и в клиентских компонентах — один и тот же импорт из `gt-next` автоматически выбирает серверную или клиентскую реализацию.*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *Примечание: в React Native оборачивайте нативные текстовые узлы, такие как `<Text>`, а не HTML-элементы.*
  </Tab>
</Tabs>

Вам не нужно задавать key или id — General Translation определяет запись по её содержимому. Оставляйте содержимое статическим; для динамических значений используйте variable components (см. [Форматирование чисел и дат](/docs/react/guides/formatting-variables)).

## Устраняйте неоднозначность с помощью контекста [#context]

Если один и тот же текст можно перевести по-разному в зависимости от смысла, добавьте `$context`, чтобы переводчики и движок могли различать записи. Это работает одинаково во всех фреймворках.

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## Сохраняйте записи стабильными с помощью id [#id]

Передайте `$id`, чтобы присвоить записи стабильный идентификатор, который не меняется при редактировании окружающей разметки. Это необязательно; используйте его, если вам нужна фиксированная ссылка на запись.

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*Примечание: содержимое внутри `<T>` должно быть статическим JSX. Перенесите условные или интерполируемые значения в [`<Var>`](/docs/react/reference/components/var), [`<Plural>`](/docs/react/reference/components/plural) или [`<Branch>`](/docs/react/reference/components/branch), чтобы окружающий текст оставался доступным для перевода.*
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries