Componentes de variables
Cómo usar componentes de variables para contenido dinámico en las traducciones
Los componentes de variables te permiten incluir de forma segura contenido dinámico dentro de los componentes <T>. Gestionan el formato y la localización de forma local sin enviar 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>: Contenido dinámico sin formato<Num>: Números con formato específico del locale<Currency>: Valores monetarios con símbolos y formato<DateTime>: Fechas y horas según las convenciones del locale
Inicio rápido
Los componentes Variable funcionan dentro de <T> para gestionar contenido dinámico:
import { T, Var, Num, Currency, DateTime } from 'gt-react';
function UserProfile({ user }) {
return (
<T>
<p>¡Bienvenido de nuevo, <Var>{user.name}</Var>!</p>
<p>Tienes <Num>{user.itemCount}</Num> artículos.</p>
<p>Saldo: <Currency currency="USD">{user.balance}</Currency></p>
<p>Último inicio de sesión: <DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Cómo funcionan los componentes de Variable
Los componentes de Variable resuelven el problema del contenido dinámico al:
- Envolver valores dinámicos para que puedan usarse dentro de
<T> - Gestionar el formateo localmente usando las APIs de i18n integradas del navegador
- Mantener los datos privados: el contenido nunca se envía a la API de traducción
- Proporcionar localización según el locale actual del usuario
// ❌ Esto falla: contenido dinámico dentro de <T>
<T><p>Hola {username}</p></T>
// ✅ Esto funciona: contenido dinámico envuelto
<T><p>Hola <Var>{username}</Var></p></T>Guía de componentes
<Var> - Contenido dinámico sin formato
Usa <Var> para cualquier contenido dinámico que no requiera formato especial:
// User information
<T>
<p>Hola, <Var>{user.name}</Var>!</p>
<p>Tu ID de cuenta es <Var>{user.accountId}</Var></p>
</T>
// Conditional rendering
<T>
Panel: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - Números con formato
Usa <Num> para números que deban seguir las reglas de formato del locale:
// Formato numérico básico
<T>
Tienes <Num>{itemCount}</Num> artículos en tu carrito.
</T>
// Uso independiente (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>
// options de formateo personalizadas
<T>
Distancia: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> - Valores monetarios
Usa <Currency> para importes monetarios:
// Formateo básico de moneda (por defecto: "USD")
<T>
Tu total es de <Currency>{total}</Currency>.
</T>
// Monedas distintas
<T>
Precio: <Currency currency="EUR">{price}</Currency>
</T>
// Formato personalizado
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - Fechas y horas
Usa <DateTime> para fechas y horas:
// Formato básico de fecha
<T>
Pedido realizado el <DateTime>{orderDate}</DateTime>
</T>
// Formato de hora
<T>
Última actualización: <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 locales
Los componentes de Variable gestionan todo el formato localmente usando las Intl APIs del navegador. No se envía contenido dinámico a la API de traducción, lo que los hace ideales para:
- Nombres de usuario e información personal
- Números de cuenta e id
- Datos financieros y saldos
- Marcas de tiempo y fechas privadas
// Seguro: los datos sensibles permanecen en el dispositivo
<T>
Saldo de la cuenta: <Currency currency="USD">{balance}</Currency>
Último inicio de sesión: <DateTime>{lastLoginTime}</DateTime>
</T>Excepción importante
Ten cuidado con los componentes <T> anidados dentro de componentes de variables:
// ⚠️ El contenido interno de <T> SE enviará para traducción
<T>
<Var>
<T>¡Hola, mundo!</T> {/* Esto se traducirá */}
{privateData} {/* Esto permanecerá local */}
</Var>
</T>Uso autónomo
Los componentes Variable pueden usarse fuera de <T> para formato puro:
// Funcionan como sus respectivos métodos .toLocale*()
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // formato de moneda
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()Problemas habituales
Ignorar opciones de localización
Para <Currency>, asegúrate de pasar la prop currency para especificar el tipo de moneda. Esto garantiza que se utilicen el símbolo y el formato de moneda correctos al mostrar el value:
// ❌ De manera predeterminada usa USD; puede que no sea lo que los usuarios esperan
<T>
El artículo cuesta <Currency>{price}</Currency>
</T>
// ✅ Especifica la moneda explícitamente
<T>
El artículo cuesta <Currency currency="EUR">{price}</Currency>
</T>Otros componentes también incluyen props opcionales que te permiten personalizar el formato:
// 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>Próximos pasos
- Guía de ramificación de componentes - Añade lógica condicional a tus traducciones
- Guía de traducción de cadenas - Traduce texto sin JSX
- Referencia de API:
¿Qué te parece esta guía?