# gt-react: General Translation React SDK: Переменные компоненты
URL: https://generaltranslation.com/ru/docs/react/guides/variables.mdx
---
title: Переменные компоненты
description: Как использовать переменные компоненты для динамического контента в переводах
---

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

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


## Доступные компоненты

* [`<Var>`](/docs/react/api/components/var): Необработанное динамическое содержимое без форматирования
* [`<Num>`](/docs/react/api/components/num): Числа с форматированием по локали
* [`<Currency>`](/docs/react/api/components/currency): Денежные значения с символами валют и форматированием
* [`<DateTime>`](/docs/react/api/components/datetime): Дата и время с учетом правил локали

## Краткое руководство

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

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-react';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```

## Как работают переменные компоненты

переменные компоненты решают проблему динамического контента следующим образом:

1. **Оборачивают динамические значения**, чтобы их можно было использовать внутри [`<T>`](/docs/react/api/components/t)
2. **Форматируют данные локально** с помощью встроенных API интернационализации браузера
3. **Сохраняют конфиденциальность данных** — контент никогда не отправляется в API перевода
4. **Обеспечивают локализацию** в соответствии с текущей локалью пользователя

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

// ✅ Это работает — динамический контент обёрнут
<T><p>Hello <Var>{username}</Var></p></T>
```

## Руководство по компонентам

### Var — Необработанное динамическое содержимое

Используйте [`<Var>`](/docs/react/api/components/var) для любого динамического содержимого, которое не требует специального форматирования:

```jsx
// Информация о пользователе
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Условный рендеринг
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num — Форматирование чисел

Используйте [`<Num>`](/docs/react/api/components/num) для чисел, которые должны форматироваться в соответствии с правилами локали:

```jsx
// Базовое форматирование чисел
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Автономное использование (эквивалент number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Настраиваемые параметры форматирования
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency — Денежные суммы

Используйте [`<Currency>`](/docs/react/api/components/currency) для денежных сумм:

```jsx
// Базовое форматирование валюты (по умолчанию "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Другие валюты
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Произвольное форматирование
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime — дата и время

Используйте [`<DateTime>`](/docs/react/api/components/datetime) для отображения даты и времени:

```jsx
// Базовое форматирование даты
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Форматирование времени
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Произвольный формат даты
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## Конфиденциальность и безопасность

### Данные остаются локальными

переменные компоненты выполняют всё форматирование локально с помощью браузерных [API Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). **Никакие динамические данные не отправляются в API перевода**, поэтому они идеально подходят для:

* Имен пользователей и личных данных
* Номеров аккаунтов и идентификаторов
* Финансовых данных и балансов
* Конфиденциальных временных меток и дат

```jsx
// Безопасно — конфиденциальные данные остаются на стороне клиента
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```

### Важное исключение

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

```jsx
// ⚠️ Содержимое внутреннего <T> БУДЕТ отправлено на перевод
<T>
  <Var>
    <T>Hello, world!</T>  {/* Это переводится */}
    {privateData}         {/* Это остаётся локальным */}
  </Var>
</T>
```

## Автономное использование

переменные компоненты можно использовать вне [`<T>`](/docs/react/api/components/t) только для форматирования:

```jsx
// Работают аналогично соответствующим методам .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // форматирование цены
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```

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

### Игнорирование параметров локали

Для [`<Currency>`](/docs/react/api/components/currency) обязательно передавайте проп `currency`, чтобы указать валюту. Это гарантирует, что при отображении значения будут использоваться правильный символ валюты и форматирование:

```jsx
// ❌ По умолчанию используется USD — может не соответствовать ожиданиям пользователей
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Явно укажите валюту
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

У других компонентов также есть необязательные свойства, позволяющие настроить форматирование:

```jsx
// Базовое форматирование
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Пользовательское форматирование
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> процент выполнения
</T>

// Форматирование даты
<T>
  Последнее обновление: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


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

* [Руководство по компонентам с ветвлением](/docs/react/guides/branches) - Добавьте в переводы условную логику
* [Руководство по переводу строк](/docs/react/guides/strings) - Переводите обычный текст без JSX
* Справочник API:
  * [Компонент `<Var>`](/docs/react/api/components/var)
  * [Компонент `<Num>`](/docs/react/api/components/num)
  * [Компонент `<Currency>`](/docs/react/api/components/currency)