# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Var>`
URL: https://generaltranslation.com/ru/docs/react/reference/components/var.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Отображает динамическое значение внутри перевода без его перевода. Справочник API для компонента `<Var>`.

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

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.*

## Обзор [#overview]

Поместите `<Var>` внутрь [`<T>`](/docs/react/reference/components/t), чтобы обозначить значение как переменную. Значение отображается как есть, а остальная часть предложения переводится вокруг него.

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*Примечание: `<Var>` всегда используется внутри [`<T>`](/docs/react/reference/components/t). Считайте его универсальным вариантом для динамических значений, которые не подходят для [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) или [`<DateTime>`](/docs/react/reference/components/datetime).*

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

* **Исключено из перевода.** Содержимое `<Var>` не отправляется в API General Translation. Оно отображается в точности в том виде, в котором было передано, что позволяет сохранить динамические или конфиденциальные значения без изменений.
* **Сохраняет перевод окружающего текста.** Если пометить значение как переменную, окружающий текст останется одной переводимой записью, а переменная будет подставлена в нужное место для каждой локали.

## Пропсы [#props]

| Prop                    | Описание                                                   | Type        | Необязательно | По умолчанию |
| ----------------------- | ---------------------------------------------------------- | ----------- | ------------- | ------------ |
| [`children`](#children) | Отображаемое значение, без перевода.                       | `ReactNode` | Нет           | —            |
| [`name`](#name)         | Имя переменной для этой записи, используется в метаданных. | `string`    | Да            | —            |

### `children` [#children]

**Тип** `ReactNode` · **Обязательный**

Содержимое, которое будет отрисовано внутри компонента. Оно передаётся без изменений и не переводится.

### `name` [#name]

**Тип** `string` · **Необязательный**

Необязательное имя переменной, используемое в метаданных и для идентификации значения в записи перевода.

## Примеры [#examples]

*В примерах используется импорт из `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

```tsx title="Address.tsx"
import { T, Var } from 'gt-react';

export default function Example({ user }) {
  return (
    <T>
      Translate this text! Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

## Заметки [#notes]

* Переменные компоненты позволяют не включать в переводы непереводимый динамический контент.
* Всегда используйте [`<Var>`](/docs/react/reference/components/t) внутри [`<T>`](/docs/react/reference/components/t).
* Для форматирования с учетом локали используйте [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) или [`<DateTime>`](/docs/react/reference/components/datetime).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.