El componente <T>
Cómo internacionalizar componentes JSX con el componente <T>
El componente <T> es la herramienta principal para internacionalizar contenido JSX en tu aplicación de React. Envuelve tus elementos JSX y los traduce automáticamente según el locale del usuario.
Guía rápida
Transforma cualquier contenido JSX estático envolviéndolo con <T>:
import { T } from 'gt-react';
// Antes
function Greeting() {
return <p>¡Hola, mundo!</p>;
}
// Después
function Greeting() {
return <T><p>¡Hola, mundo!</p></T>;
}Para contenido dinámico dentro de <T>, usa componentes de Variable y componentes de branching.
Uso básico
El componente <T> acepta cualquier contenido JSX como children:
// Texto simple
<T>Bienvenido a nuestra aplicación</T>
// Elementos HTML
<T><h1>Título de la página</h1></T>
// JSX anidado complejo
<T>
<div className="alert">
<span>Importante:</span> Por favor lee cuidadosamente.
</div>
</T>Opciones de configuración
Agregar contexto
Proporcione contexto de traducción para términos ambiguos:
<T context="notification popup, not bread">
Haz clic en la notificación para cerrarla
</T>Configuración de IDs de traducción
Usa IDs explícitos para obtener traducciones consistentes:
<T id="welcome-message">
¡Bienvenido de nuevo, usuario!
</T>Cuándo usar <T>
Utiliza <T> únicamente para contenido estático:
// ✅ El contenido estático funciona
<T><button>Haz clic aquí</button></T>
<T><h1>Bienvenido a nuestro sitio</h1></T>
// ❌ El contenido dinámico falla
<T><p>Hola {username}</p></T>
<T><p>Hoy es {new Date()}</p></T>
// ✅ Usa componentes Variable para contenido dinámico
<T>
<p>Hola <Var>{username}</Var></p>
</T>Los componentes Variable y Branching están diseñados para usarse dentro de <T> con contenido dinámico. Consulta las guías Variable Components y Branching Components para obtener más información.
Ejemplos
Elementos simples
// Texto básico
<T>¡Hola, mundo!</T>
// Botón con texto
<T><Button>Enviar formulario</Button></T>
// Encabezado con estilos
<T><h1 className="text-2xl font-bold">Bienvenido</h1></T>Componentes complejos
// Menú de navegación
<T>
<nav className="navbar">
<a href="/about">Acerca de nosotros</a>
<a href="/contact">Contacto</a>
</nav>
</T>
// Mensaje de alerta
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Tu sesión expira en 5 minutos</span>
</div>
</T>Con Variables
// Combinando texto estático con valores dinámicos
<T>
<p>Bienvenido de nuevo, <Var>{user.name}</Var>!</p>
</T>
// Formulario con contenido mixto
<T>
<label>
Correo electrónico: <input type="email" placeholder="Ingresa tu correo electrónico" />
</label>
</T>Más información sobre el <Var> component en la Guía de componentes Variable.
Configuración en producción
Proceso de compilación
Añade la traducción a tu flujo de compilación:
{
"scripts": {
"build": "npx gtx-cli translate && <...TU_COMANDO_DE_BUILD...>"
}
}Comportamiento en desarrollo vs producción
- Desarrollo: Con una clave de API de desarrollo, las traducciones se generan bajo demanda cuando se renderizan los componentes. Verás las traducciones en tiempo real mientras desarrollas.
- Producción: Todas las traducciones se generan previamente durante la fase de build y serán visibles cuando tu aplicación esté en producción.
Configura tu clave de API de desarrollo en tu entorno para habilitar la traducción en vivo durante el desarrollo. Puedes crear una en el dashboard, en API Keys.
Consideraciones de privacidad
El contenido de los componentes <T> se envía a la API de GT para su traducción. Para datos sensibles, usa Variable Components y mantén la información privada en local:
// Seguro - los datos sensibles permanecen locales
<T>
Bienvenido de nuevo, <Var>{username}</Var>
</T>Problemas frecuentes
Límites de componentes
<T> solo traduce los elementos hijos directos, no el contenido dentro de otros componentes:
// ❌ Incorrecto - el contenido dentro de componentes no será traducido
function MyComponent() {
return <p>Esto no será traducido</p>;
}
<T>
<h1>Esto será traducido</h1>
<MyComponent /> {/* El contenido interno no será traducido */}
</T>
// ✅ Correcto - envuelve cada componente individualmente
function MyComponent() {
return <T><p>Esto será traducido</p></T>;
}
<T><h1>Esto será traducido</h1></T>
<MyComponent />Anidar componentes <T>
// ❌ No anides componentes <T>
<T>
<T>Hola mundo</T> {/* No hagas esto */}
</T>Errores de contenido dinámico
La CLI producirá un Error si encuentra contenido dinámico en <T>. Envuelve los valores dinámicos con componentes Variable:
// ❌ Incorrecto - el contenido dinámico falla
<T><p>Hola {username}</p></T>
// ✅ Correcto - usa componentes Variable
<T><p>Hola <Var>{username}</Var></p></T>Consulta la Guía de componentes Variable para gestionar valores dinámicos y la Guía de componentes de ramificación para contenido condicional.
Próximos pasos
- Guía de componentes Variable - Gestiona contenido dinámico dentro de traducciones en JSX
- Guía de componentes Branching - Agrega lógica condicional a tus traducciones
¿Qué te ha parecido esta guía?