# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<T>`
URL: https://generaltranslation.com/ru/docs/react/reference/components/t.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Переводите JSX-дочерние элементы на месте. Справочник по API для компонента `<T>`.

Компонент `<T>` — основной способ перевода в `gt-react`. Он переводит JSX-дочерние элементы — обычный текст и вложенную разметку — в активную локаль на месте.

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.*

## Обзор [#overview]

Оберните любой статический JSX в `<T>`, и он будет переведён в соответствии с активной локалью. Для динамических значений используйте компоненты переменных, такие как [`<Var>`](/docs/react/reference/components/var) и [`<Num>`](/docs/react/reference/components/num).

```tsx
<T>
  Today, I went to
  <p>
    the <b>store</b> to buy some <i>groceries</i>.
  </p>
</T>
```

*Примечание: Приложения `gt-react` с серверным рендерингом и приложения на TanStack Start предоставляют локаль и переводы через [`<GTProvider>`](/docs/react/reference/components/gt-provider), тогда как приложения `gt-next` и `gt-react-native` используют провайдер своего фреймворка без этих пропсов. React SPA, инициализированным с помощью [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), провайдер не нужен.*

## Как это работает [#how-it-works]

* **Перевод на этапе сборки.** В продакшене содержимое внутри `<T>` переводится на этапе сборки (или развертывания), ещё до того, как пользователи откроют приложение. Это ускоряет работу во время выполнения, но переводить можно только то содержимое, которое известно на этапе сборки. Сгенерированные переводы отдаются из CDN или из результатов сборки приложения, а если перевод отсутствует, используется исходное содержимое.
* **По запросу в процессе разработки.** Если настроена горячая перезагрузка для разработки, `<T>` запрашивает недостающие переводы прямо во время прототипирования. В компонентах, отрисовываемых на клиенте, до появления перевода отображается исходное содержимое, а во время обновления может сохраняться предыдущий перевод. Отклонённые клиентские запросы во время выполнения записываются в журнал, причём повторяющиеся ошибки дедуплицируются. Серверные компоненты вместо этого ожидают завершения поиска перевода. В продакшене используются сгенерированные переводы, а если перевод отсутствует — исходное содержимое.
* **Переводит дочерние элементы, а не динамические дочерние элементы.** `<T>` переводит JSX, буквально записанный между его тегами. Содержимое, переданное через переменную (например, `{greeting}`), перевести нельзя — это вызовет ошибку; оборачивайте динамические значения в компонент переменной. Простое правило: всё, что буквально находится между двумя тегами `<T>`, переводится. Не вкладывайте компоненты `<T>` друг в друга.

## Пропсы [#props]

| Пропс                                 | Описание                                                         | Тип         | Необязательный | По умолчанию |
| ------------------------------------- | ---------------------------------------------------------------- | ----------- | -------------- | ------------ |
| [`children`](#children)               | JSX-содержимое, которое нужно перевести.                         | `ReactNode` | Нет            | —            |
| [`$context`](#context)                | Уточняющий контекст для переводчиков.                            | `string`    | Да             | —            |
| [`$id`](#id)                          | Стабильный идентификатор записи.                                 | `string`    | Да             | —            |
| [`$maxChars`](#max-chars)             | Запрошенная максимальная длина сгенерированных переводов.        | `number`    | Да             | —            |
| [`$requiresReview`](#requires-review) | Помечает перевод как требующий утверждения перед использованием. | `boolean`   | Да             | —            |

### `children` [#children]

**Тип** `ReactNode` · **Обязательно**

Содержимое для перевода. Это может быть обычный текст или JSX-структура, включая компоненты переменных и компоненты ветвления. Содержимое должно быть статическим; динамические значения необходимо оборачивать в компонент переменной.

### `$context` [#context]

**Тип** `string` · **Необязательный**

Дополнительный контекст для уточнения перевода. Полезен для разрешения неоднозначности во фразах, чтобы переводчики передавали нужный смысл.

### `$id` [#id]

**Тип** `string` · **Необязательно**

Стабильный идентификатор записи перевода, который помогает сохранять согласованность переводов и упрощает поиск этой записи в редакторе переводов.

### `$maxChars` [#max-chars]

**Тип** `number` · **Необязательный**

Запрашивает у инструментов перевода максимальное количество символов в виде положительного целого числа. Среда выполнения не обрезает переведённый контент.

### `$requiresReview` [#requires-review]

**Тип** `boolean` · **Необязательно**

Помечает переведённый контент как требующий утверждения перед использованием, поэтому он отправляется на проверку и не выдается автоматически.

## Примеры [#examples]

*В примерах импортируется `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

```tsx title="Greeting.tsx"
import { T } from 'gt-react';

export default function Greeting() {
  return (
    <T>
      Hello, world! // [!code highlight]
    </T>
  );
}
```

```tsx title="DynamicGreeting.tsx"
import { T, Var } from 'gt-react';

export default function DynamicGreeting({ user }) {
  return (
    <T>
      Hello, <Var>{user.name}</Var>! // [!code highlight]
    </T>
  );
}
```

```tsx title="ItemCount.tsx"
import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <T>
      <Plural
        n={count} // [!code highlight]
        one={<>You have an item.</>}
        other={<>You have items.</>}
      />
    </T>
  );
}
```

```tsx title="DynamicContent.tsx"
import { T } from 'gt-react';

export default function DynamicContent({ greeting }) {
  return (
    <T>
      {greeting} // ❌ динамические дочерние элементы не могут быть переведены — оберните в <Var> // [!code highlight]
    </T>
  );
}
```

```tsx title="Descendants.tsx"
import { T } from 'gt-react';

const ValidTranslation = ({ children }) => <div><b>{children}</b></div>;
const InvalidTranslation = () => <div><b>No translation</b></div>;

export default function Example() {
  return (
    <T>
      <div><b>This is valid!</b></div> {/* переведено */}

      <ValidTranslation>
        Hello, world! {/* переведено */}
      </ValidTranslation>

      <InvalidTranslation /> {/* не переводится — содержимое здесь не является литеральным */}
    </T>
  );
}
```

## Примечания [#notes]

* `<T>` предназначен для перевода контента. Используйте его для обычного текста или JSX-структур, включая переменные и формы множественного числа.
* В настройках с провайдером `<T>` рендерится внутри [`<GTProvider>`](/docs/react/reference/components/gt-provider). React SPA и синхронным серверным компонентам `gt-next` он не требуется, но клиентским компонентам `gt-next` требуется.
* Для перевода отдельных строк, таких как плейсхолдеры и подписи, используйте [`useGT`](/docs/react/reference/hooks/use-gt).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.