# General Translation React SDKs (gt-react, gt-next): T
URL: https://generaltranslation.com/ru/docs/react/reference/components/t.mdx
---

title: T
description: Переводите JSX-дочерние элементы на месте с помощью General Translation gt-react. Справочник по API для T.

---

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

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах импорт выполняется из `gt-react`; в вашем случае импортируйте из пакета соответствующего фреймворка.*

## Обзор [#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>
```

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

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

* **Перевод на этапе сборки.** В продакшене содержимое внутри `<T>` переводится на этапе сборки (или развертывания), ещё до того, как пользователи откроют приложение. Это ускоряет работу во время выполнения, но переводить можно только то содержимое, которое известно на этапе сборки. Сгенерированные переводы отдаются из CDN или из результатов сборки приложения, а если перевод отсутствует, используется исходное содержимое.
* **По запросу в процессе разработки.** Если задан API-ключ для разработки, `<T>` переводит по запросу, чтобы вы могли просматривать локали во время прототипирования. Пока перевод загружается, `<T>` возвращает `undefined` (если только исходная и целевая локали не используют один и тот же язык, например `en-US` и `en-GB`); при ошибке возвращается исходное содержимое. В продакшен-сборках такой задержки нет.
* **Переводит дочерние элементы, а не динамические дочерние элементы.** `<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]

```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-структур, включая переменные и формы множественного числа.
* Чтобы получить доступ к контексту перевода, его нужно обернуть в [`<GTProvider>`](/docs/react/reference/components/gt-provider).
* Для перевода отдельных строк, таких как плейсхолдеры и подписи, используйте [`useGT`](/docs/react/reference/hooks/use-gt).