# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/ru/docs/next/api/components/tx.mdx
---
title: Tx
description: Справочник по API для компонента Tx
---

## Обзор

Компонент `<Tx>` переводит содержимое JSX во время выполнения.

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

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

<Callout>
  **Перевод во время выполнения:**
  Переводы `<Tx>` выполняются во время выполнения.
  Это означает, что перевод выполняется на лету.
</Callout>

***


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

### Свойства

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

### Описания

| Свойство   | Описание                                                                                                                                              |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Содержимое, которое нужно перевести. Это может быть обычный текст или JSX-структуры.                                                                  |
| `context`  | Дополнительный контекст для уточнения перевода. Полезно для устранения неоднозначности фраз.                                                          |
| `locale`   | Необязательная локаль для перевода. По умолчанию используется наиболее предпочтительная локаль браузера из тех, которые поддерживает ваше приложение. |
| `maxChars` | Необязательное максимальное количество символов в переводе. Библиотека строго соблюдает это ограничение.                                              |

***

## Поведение

`<Tx>` переводит JSX во время выполнения.
Это означает, что переводы выполняются на лету, поэтому вы можете переводить контент, который становится известен только во время выполнения.
Обратная сторона этого — задержка: ожидание загрузки перевода по запросу значительно замедляет работу.

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

Мы рекомендуем переводить всё, что можно, на этапе сборки с помощью [`<T>`](/docs/next/api/components/t), [`getGT`](/docs/next/api/strings/use-gt) или [`useGT`](/docs/next/api/strings/use-gt),
и использовать переводы по запросу, такие как `<Tx>` и [`tx`](/docs/next/api/strings/tx), только при необходимости.

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

***

## Примеры

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

Компонент `<Tx>` переводит свои дочерние элементы во время выполнения.

```jsx title="SimpleTranslation.jsx" copy
import { Tx } from 'gt-next/server';

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

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

Вы можете использовать компонент `<Var>`, чтобы помечать дочерние элементы как переменные.
Так можно отметить содержимое, которое не должно переводиться.

```jsx title="DynamicGreeting.jsx" copy
import { Tx, Var } from 'gt-next/server';

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

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

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

```jsx title="ItemCount.jsx" copy
import { Tx, Plural } from 'gt-next/server';

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

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

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

```jsx title="Example.jsx" copy
import { Tx } from 'gt-next/server';

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

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

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

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

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

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

***

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

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

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

* Для перевода на этапе сборки изучите компонент [`<T>`](/docs/next/api/components/t).
* Более продвинутые возможности см. в [справочнике по `<T>`](/docs/next/guides/t).
* Для перевода строк изучите [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) и [`useGT`](/docs/next/api/strings/use-gt).