# react-native: Componentes de variable
URL: https://generaltranslation.com/es/docs/react-native/guides/variables.mdx
---
title: Componentes de variable
description: Cómo usar componentes de variable para contenido dinámico en las traducciones
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}

Los componentes de variable te permiten incluir contenido dinámico de forma segura dentro de los componentes [`<T>`](/docs/react-native/api/components/t). Gestionan el formato y la localización de forma local, sin enviar esos datos a la API de traducción, lo que los hace ideales para información sensible, como nombres de usuario, números de cuenta y datos financieros.


## Componentes disponibles

* [`<Var>`](/docs/react-native/api/components/var): Contenido dinámico sin formato
* [`<Num>`](/docs/react-native/api/components/num): Números con formato según la configuración regional
* [`<Currency>`](/docs/react-native/api/components/currency): Valores monetarios con símbolos y formato
* [`<DateTime>`](/docs/react-native/api/components/datetime): Fechas y horas según las convenciones de la configuración regional

## Inicio rápido

Los componentes de variable se usan dentro de [`<T>`](/docs/react-native/api/components/t) para manejar contenido dinámico:

```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>
  );
}
```


## Cómo funcionan los componentes de variable

Los componentes de variable resuelven el problema del contenido dinámico así:

1. **Envuelven los valores dinámicos** para que puedan usarse dentro de [`<T>`](/docs/react-native/api/components/t)
2. **Gestionan el formato localmente** mediante las API de i18n integradas del navegador
3. **Mantienen la privacidad de los datos**: el contenido nunca se envía a la API de traducción
4. **Proporcionan localización** según la configuración regional actual del usuario

```jsx
// ❌ Esto falla - contenido dinámico en <T>
<T><p>Hello {username}</p></T>

// ✅ Esto funciona - contenido dinámico envuelto
<T><p>Hello <Var>{username}</Var></p></T>
```


## Guía de componentes

### Var - Contenido dinámico sin formato

Usa [`<Var>`](/docs/react-native/api/components/var) para cualquier contenido dinámico que no requiera un formato especial:

```jsx
// Información del usuario
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Renderizado condicional
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - Números formateados

Usa [`<Num>`](/docs/react-native/api/components/num) para números que deban seguir las reglas de formato de la configuración regional:

```jsx
// Formato numérico básico
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Uso autónomo (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Opciones de formato personalizadas
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - Valores monetarios

Usa [`<Currency>`](/docs/react-native/api/components/currency) para cantidades monetarias:

```jsx
// Formato de moneda básico (por defecto "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Diferentes monedas
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Formato personalizado
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - Fechas y horas

Usa [`<DateTime>`](/docs/react-native/api/components/datetime) para fechas y horas:

```jsx
// Formato de fecha básico
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Formato de hora
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Formato de fecha personalizado
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## Privacidad y seguridad

### Los datos se mantienen en local

Los componentes de variable realizan todo el formato localmente con las [API de Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) del navegador. **No se envía ningún contenido dinámico a la API de traducción**, por lo que son ideales para:

* Nombres de usuario e información personal
* Números de cuenta e ID
* Datos financieros y saldos
* Marcas temporales y fechas privadas

```jsx
// Seguro - los datos sensibles permanecen en local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### Excepción importante

Presta atención a los componentes [`<T>`](/docs/react-native/api/components/t) anidados dentro de los componentes de variable:

```jsx
// ⚠️ El contenido interno de <T> SÍ será enviado para traducción
<T>
  <Var>
    <T>Hello, world!</T>  {/* Esto se traduce */}
    {privateData}         {/* Esto permanece local */}
  </Var>
</T>
```


## Uso autónomo

Los componentes de variable pueden usarse fuera de [`<T>`](/docs/react-native/api/components/t) solo para dar formato:

```jsx
// Funcionan como sus respectivos métodos .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // formato de precio
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## Problemas comunes

### Ignorar las opciones de localización

Para [`<Currency>`](/docs/react-native/api/components/currency), asegúrate de proporcionar la prop `currency` para especificar la moneda. Esto garantiza que, al mostrar el valor, se utilicen el símbolo de moneda y el formato correctos:

```jsx
// ❌ Usa USD por defecto - puede que no sea lo que los usuarios esperan
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Especifica la moneda de forma explícita
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

Otros componentes también incluyen props opcionales que te permiten personalizar el formato:

```jsx
// Formato básico
<T>
  <Num>{count}</Num> artículos en stock
</T>

// Formato personalizado
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> tasa de finalización
</T>

// Formato de fecha
<T>
  Última actualización: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## Siguientes pasos

* [Guía de componentes condicionales](/docs/react-native/guides/branches) - Añade lógica condicional a tus traducciones
* [Guía de traducción de cadenas](/docs/react-native/guides/strings) - Traduce texto simple sin JSX
* Referencias de la API:
  * [Componente `<Var>`](/docs/react-native/api/components/var)
  * [Componente `<Num>`](/docs/react-native/api/components/num)
  * [Componente `<Currency>`](/docs/react-native/api/components/currency)