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

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

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


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

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

## Быстрый старт

Переменные компоненты работают внутри [`<T>`](/docs/next/api/components/t) и обрабатывают динамический контент:

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

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/next/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/next/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/next/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/next/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/next/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>
```


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

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

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

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

```jsx
// Безопасно — конфиденциальные данные остаются локально
<T>
  Баланс счёта: <Currency currency="USD">{balance}</Currency>
  Последний вход: <DateTime>{lastLoginTime}</DateTime>
</T>
```


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

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

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


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

Переменные компоненты можно использовать вне [`<T>`](/docs/next/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/next/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/next/guides/branches) — добавьте условную логику в переводы
* [Руководство по переводу строк](/docs/next/guides/strings) — переводите обычный текст без JSX
* Справочник по API:
  * [`<Var>` Component](/docs/next/api/components/var)
  * [`<Num>` Component](/docs/next/api/components/num)
  * [`<Currency>` Component](/docs/next/api/components/currency)