# gt-react: General Translation React SDK: T
URL: https://generaltranslation.com/ru/docs/react/api/components/t.mdx
---
title: T
description: Справка по API компонента T
---

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


## Обзор

Компонент `<T>` — основной способ перевода в `gt-react`.

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

Компонент `<T>` поддерживает перевод как обычного текста, так и сложных JSX-структур.
Кроме того, он позволяет работать с переменными, множественными формами и контекстно-зависимыми переводами.

<Callout>
  **Перевод на этапе сборки:**
  Переводы `<T>` выполняются на этапе сборки.
  То есть перевод выполняется до развертывания, что помогает снизить задержку.
  Обязательно ознакомьтесь с [руководством по развертыванию](/docs/react/tutorials/quickdeploy).
</Callout>


## Справочник

### Свойства

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Свойство   | Описание                                                                                            |
| ---------- | --------------------------------------------------------------------------------------------------- |
| `children` | Содержимое, которое нужно перевести. Это может быть обычный текст или JSX-структуры.                |
| `id`       | Уникальный идентификатор строки перевода. Он обеспечивает единообразный перевод во всём приложении. |
| `context`  | Дополнительный контекст для уточнения перевода. Полезен для разрешения неоднозначных фраз.          |

### Возвращает

`React.JSX.Element|undefined`, содержащий отображённый перевод или резервное содержимое в соответствии с указанной конфигурацией.

***

## Поведение

### Продакшен

Во время CD всё содержимое внутри `<T>` переводится до развертывания приложения.
Это обеспечивает быструю загрузку для всех локалей, но переводить можно только контент, известный на этапе сборки.

После генерации переводы либо (1) сохраняются в CDN, либо (2) включаются в результат сборки приложения — в зависимости от вашей конфигурации.
Затем переведенный контент отдается пользователям.
Если перевод не найден, будет использован исходный контент.

Обязательно ознакомьтесь с [руководством по развертыванию](/docs/react/tutorials/quickdeploy).

### Разработка

Во время разработки функция `<T>` будет переводить содержимое по запросу.
Это полезно для прототипирования того, как ваше приложение будет выглядеть на разных языках.
Не забудьте добавить Dev API key в переменные окружения, чтобы включить это поведение.

Во время загрузки `<T>` будет возвращать undefined, если только языки не похожи (en-US vs en-GB), хотя это поведение можно настроить с помощью параметров рендеринга.
Если произойдет ошибка, `<T>` вернет исходное содержимое.

Во время перевода по запросу в режиме разработки будет заметна задержка.
В production-сборках этой задержки не будет, так как все уже будет переведено.

***

## Примеры

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

Компонент `<T>` может переводить простые строки, используя `id` и дочерние элементы.
Помните: чтобы получить доступ к переводам, компонент `<T>` нужно использовать внутри [`<GTProvider>`](/docs/react/api/components/gtprovider).

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-react';

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


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

Компонент `<T>` может включать переменные для подстановки динамического содержимого в переводы.

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

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


### С формами множественного числа

Компонент `<T>` также поддерживает формы множественного числа с помощью компонента `<Plural>`.

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

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


### Ограничения

Компонент `<T>` не переводит динамический контент.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // вызовет ошибку // [!code highlight]
        </T>
    );
}
```

Функция `<T>` переводит все вложенные элементы.

```jsx title="Example.jsx" copy
import { T } from 'gt-react';

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

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

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // будет переведено // [!code highlight]

            <ValidTranslation> // будет переведено // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // не будет переведено
        </T>
    );
}
```

<Callout>
  **Примечание:** Как правило, переводится любой контент, который *буквально* находится в файле между двумя `<T>`.
  Вы всегда можете добавить ещё один `<T>`, чтобы перевести контент, который не переводится, хотя вкладывать компоненты `<T>` друг в друга не рекомендуется.
</Callout>

***


## Примечания

* Компонент `<T>` предназначен для перевода содержимого в вашем приложении. Это основной способ локализации в `gt-react`.
* Используйте компонент `<T>` для перевода обычного текста и JSX-структур, включая переменные и формы множественного числа.
* Убедитесь, что компонент `<T>` находится внутри [`<GTProvider>`](/docs/react/api/components/gtprovider), чтобы иметь доступ к контексту перевода.

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

* Чтобы узнать больше о таких продвинутых возможностях, как перевод по запросу, переменные, контекст и работа с формами множественного числа, см. документацию по [шаблонам использования `<T>`](/docs/react/guides/t).
* Для перевода строк см. [`useGT`](/docs/react/api/strings/use-gt).