# react-native: T
URL: https://generaltranslation.com/ru/docs/react-native/api/components/t.mdx
---
title: T
description: Справка по API для компонента T
---

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


## Обзор

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

```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-native/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-native/tutorials/quickdeploy).

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

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

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

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

***

## Примеры

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

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

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

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-native';

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-native';

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-native';

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

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

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

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-native`.
* Используйте компонент `<T>` для перевода обычного текста или JSX-структур, включая переменные и формы множественного числа.
* Убедитесь, что компонент `<T>` обёрнут в [`<GTProvider>`](/docs/react-native/api/components/gtprovider), чтобы получить доступ к контексту перевода.

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

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