Componentes de variables
Cómo usar componentes de variables para contenido dinámico dentro de traducciones
Los componentes de variables te permiten incluir de forma segura contenido dinámico dentro de componentes <T>. Se encargan del formato y la localización de manera 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 formatear<Num>: Números con formato específico del locale<Currency>: Importes con símbolo y formato de moneda<DateTime>: Fechas y horas según las convenciones del locale
Inicio rápido
Los componentes Variable funcionan dentro de <T> para manejar 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> elementos.</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 Variable
Los componentes Variable resuelven el problema del contenido dinámico mediante:
- Envolver valores dinámicos para que puedan usarse dentro de
<T> - Gestionar el formato localmente usando las API 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 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> para cualquier contenido dinámico que no requiera un formato especial:
// Información del usuario
<T>
<p>Hola, <Var>{user.name}</Var>!</p>
<p>Tu ID de cuenta es <Var>{user.accountId}</Var></p>
</T>
// Renderizado condicional
<T>
Dashboard: <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 básico de números
<T>
Tienes <Num>{itemCount}</Num> artículos en tu carrito.
</T>
// Uso independiente (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>
// Opciones de formato personalizadas
<T>
Distancia: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> - Valores de dinero
Usa <Currency> para cantidades monetarias:
// Formato básico de moneda (por defecto "USD")
<T>
Su total es <Currency>{total}</Currency>.
</T>
// Diferentes monedas
<T>
Precio: <Currency currency="EUR">{price}</Currency>
</T>
// Formato personalizado
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - Fechas y horas
Utiliza <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 Variable realizan todo el formateo localmente mediante 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 IDs
- Datos financieros y saldos
- Marcas de tiempo y fechas privadas
// Seguro - los datos sensibles permanecen locales
<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 traduce */}
{privateData} {/* Esto se mantiene local */}
</Var>
</T>Uso independiente
Los componentes Variable se pueden usar fuera de <T> para formato puro:
// Estos 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 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:
// ❌ Por defecto es USD - puede no ser lo que los usuarios esperan
<T>
El artículo cuesta <Currency>{price}</Currency>
</T>
// ✅ Especifica explícitamente la moneda
<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 textos - Traduce texto sin JSX
- Referencia de API:
¿Qué te ha parecido esta guía?