# react-native: Компонент T
URL: https://generaltranslation.com/ru/docs/react-native/guides/t.mdx
---
title: Компонент T
description: Как добавить интернационализацию в JSX-компоненты с помощью компонента T
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}

Компонент [`<T>`](/docs/react-native/api/components/t) — основной инструмент для интернационализации JSX-контента в приложении React Native. Он оборачивает JSX-элементы и автоматически переводит их в соответствии с локалью пользователя.

<Callout>
  **Совет:** Если включена функция [auto JSX injection](/docs/cli/features/auto-jsx-injection), компилятор может автоматически оборачивать JSX в компоненты перевода на этапе сборки.
  В большинстве случаев добавлять `<T>` вручную не потребуется. Однако ручное использование `<T>` по-прежнему полезно, если нужен более точный контроль, например чтобы задать конкретный `id` или `context`.
</Callout>

## Быстрый старт

Преобразуйте любой статический JSX-контент, обернув его в [`<T>`](/docs/react-native/api/components/t):

```jsx
import { T } from 'gt-react-native';

// До
function Greeting() {
  return <p>Hello, world!</p>;
}

// После
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Для динамического контента внутри [`<T>`](/docs/react-native/api/components/t) используйте [компоненты для переменных](/docs/react-native/guides/variables) и [компоненты ветвления](/docs/react-native/guides/branches).


## Базовое использование

[Компонент `<T>`](/docs/react-native/api/components/t) принимает в качестве дочерних элементов любой контент JSX:

```jsx
// Простой текст
<T>Welcome to our app</T>

// HTML-элементы
<T><h1>Page Title</h1></T>

// Сложный вложенный JSX
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## Параметры конфигурации

### Добавление контекста

Укажите контекст перевода для неоднозначных терминов:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## Когда использовать T

Используйте [`<T>`](/docs/react-native/api/components/t) **только для статического содержимого**:

```jsx
// ✅ Статическое содержимое работает
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ Динамическое содержимое не работает
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Используйте компоненты для переменной для динамического содержимого
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Компоненты для переменной и ветвления предназначены для работы внутри [`<T>`](/docs/react-native/api/components/t) с динамическим содержимым.
  Подробнее см. в руководствах [Компоненты для переменной](/docs/react-native/guides/variables) и [Компоненты ветвления](/docs/react-native/guides/branches).
</Callout>

## Примеры

### Простые элементы

```jsx
// Простой текст
<T>Hello, world!</T>

// Кнопка с текстом
<T><Button>Submit Form</Button></T>

// Заголовок со стилями
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Сложные компоненты

```jsx
// Навигационное меню
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Предупреждающее сообщение
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### С переменными

Для локализованного форматирования можно использовать компоненты для переменной.

```jsx
// Объединение статического текста с динамическими значениями
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Подробнее о компоненте [`<Var>`](/docs/react-native/api/components/var) см. в [руководстве по компонентам для переменной](/docs/react-native/guides/variables).
</Callout>

## Настройка продакшена

### Процесс сборки

Добавьте перевод в свой пайплайн сборки:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Поведение в разработке и в продакшене

* **Разработка**: При использовании API-ключа разработки переводы выполняются по запросу во время рендеринга компонентов. Во время разработки вы будете видеть переводы в реальном времени.
* **Продакшен**: Все переводы предварительно собираются на этапе сборки и станут видны после публикации приложения.

Укажите API-ключ разработки в переменных окружения, чтобы включить перевод в реальном времени при разработке. Вы можете создать его в панели управления в разделе [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Вопросы конфиденциальности

Содержимое компонентов [`<T>`](/docs/react-native/api/components/t) отправляется в API GT для перевода. Для чувствительных данных используйте [переменные компоненты](/docs/react-native/guides/variables), чтобы конфиденциальная информация оставалась локально:

```jsx
// Безопасно — конфиденциальные данные остаются локальными
<T>
  Welcome back, <Var>{username}</Var>
</T>
```

## Сколько содержимого оборачивать в один `<T>`

Оборачивайте **логически связанные блоки содержимого** — то, что переводчик естественно прочитает и переведёт как единое целое.

```jsx
// ✅ Хорошо — связанное содержимое обёрнуто вместе, что даёт переводчикам полный контекст
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Хорошо — каждая карточка является самостоятельной единицей
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Слишком узко — фрагментирует перевод, теряется контекст
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Слишком широко — оборачивание всей страницы усложняет поддержку
<T>
  {/* ...сотни строк JSX... */}
</T>
```

**Практическое правило:** если текст визуально или семантически связан, оберните его в один `<T>`. Разделяйте только тогда, когда части содержимого действительно независимы друг от друга (например, заголовок и нижний колонтитул).

Если обернуть больше содержимого в один `<T>`, переводчикам будет проще понять контекст, а значит, перевод получится более естественным — в некоторых языках приходится перестраивать предложения или учитывать соседнее содержимое.


## Типичные проблемы

### Границы компонентов

[`<T>`](/docs/react-native/api/components/t) переводит только непосредственных потомков, а не содержимое внутри других компонентов:

```jsx
// ❌ Неверно — содержимое внутри компонентов не будет переведено
function MyComponent() {
  return <p>Это не будет переведено</p>;
}

<T>
  <h1>Это будет переведено</h1>
  <MyComponent /> {/* Содержимое внутри не будет переведено */}
</T>

// ✅ Верно — оборачивайте каждый компонент отдельно
function MyComponent() {
  return <T><p>Это будет переведено</p></T>;
}

<T><h1>Это будет переведено</h1></T>
<MyComponent />
```


### Вложенные компоненты T

```jsx
// ❌ Не вкладывайте компоненты <T> друг в друга
<T>
  <T>Hello world</T> {/* Не делайте так */}
</T>
```


### Ошибки, связанные с динамическим содержимым

CLI выдаст ошибку, если в [`<T>`](/docs/react-native/api/components/t) есть динамическое содержимое. Оберните динамические значения в компоненты для переменной:

```jsx
// ❌ Неверно — динамический контент вызывает ошибку
<T><p>Hello {username}</p></T>

// ✅ Верно — используйте компоненты для переменной
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  См. [руководство по компонентам для переменной](/docs/react-native/guides/variables) для работы с динамическими значениями и [руководство по компонентам ветвления](/docs/react-native/guides/branches) — для условного содержимого.
</Callout>

## Следующие шаги

<Callout>
  **Посмотрите в действии:** Ознакомьтесь с [примером приложения с основами компонента `<T>`](https://github.com/gt-examples/t-component-basics), чтобы увидеть его в работе — [предварительный просмотр в реальном времени](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Руководство по переменным компонентам](/docs/react-native/guides/variables) - Работа с динамическим контентом в JSX-переводах
* [Руководство по компонентам ветвления](/docs/react-native/guides/branches) - Добавляйте в переводы условную логику