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

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

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


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

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

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

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

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

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-native/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-native/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-native/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-native/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-native/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-native/api/components/t) внутри переменных компонентов:

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


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

переменные компоненты можно использовать вне [`<T>`](/docs/react-native/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-native/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> items in stock
</T>

// Настраиваемое форматирование
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

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


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

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