El componente <T>
Cómo internacionalizar componentes JSX usando 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.
Inicio rápido
Transforma cualquier contenido JSX estático envolviéndolo con <T>:
import { T } from 'gt-react';
// Antes
function Greeting() {
return <p>Hello, world!</p>;
}
// Después
function Greeting() {
return <T><p>Hello, world!</p></T>;
}Para contenido dinámico dentro de <T>, usa Componentes de variables y Componentes de ramificación.
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, lea con atención.
</div>
</T>Opciones de configuración
Agregar contexto
Proporciona contexto de traducción para términos ambiguos:
<T context="notification popup, not bread">
Haz clic en la notificación para descartarla
</T>Definir IDs de traducción
Usa IDs explícitas para garantizar traducciones consistentes:
<T id="welcome-message">
¡Bienvenido de nuevo, usuario!
</T>Cuándo usar <T>
Usa <T> para contenido estático únicamente:
// ✅ El contenido estático funciona
<T><button>Haz clic aquí</button></T>
<T><h1>Bienvenido a nuestro sitio</h1></T>
// ❌ El contenido dinámico no funciona
<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 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
// Navigation menu
<T>
<nav className="navbar">
<a href="/about">Acerca de nosotros</a>
<a href="/contact">Contacto</a>
</nav>
</T>
// Alert message
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Tu sesión caduca 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>Obtén más información sobre el componente [<Var>] en la Guía de componentes de Variable.
Configuración de producción
Proceso de compilación
Añade la traducción a tu canal de compilación:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}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 traducciones en tiempo real mientras desarrollas.
- Producción: Todas las traducciones se generan previamente durante la fase de compilación 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 tiempo real 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 Componentes de Variable para mantener 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 los componentes
<T> solo traduce los children directos, no el contenido dentro de otros componentes:
// ❌ Incorrecto - el contenido dentro de los componentes no se traducirá
function MyComponent() {
return <p>Esto no se traducirá</p>;
}
<T>
<h1>Esto se traducirá</h1>
<MyComponent /> {/* El contenido interno no se traducirá */}
</T>
// ✅ Correcto - envuelve cada componente de forma individual
function MyComponent() {
return <T><p>Esto se traducirá</p></T>;
}
<T><h1>Esto se traducirá</h1></T>
<MyComponent />Anidación de componentes <T>
// ❌ No anides componentes <T>
<T>
<T>Hello world</T> {/* No hagas esto */}
</T>Errores de contenido dinámico
La CLI producirá un error cuando haya contenido dinámico en <T>. Envuelve los valores dinámicos con componentes Variable:
// ❌ Incorrecto - el contenido dinámico se rompe
<T><p>Hello {username}</p></T>
// ✅ Correcto - usa componentes Variable
<T><p>Hello <Var>{username}</Var></p></T>Consulta la Guía de componentes de Variable para manejar value 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 ramificados - Agrega lógica condicional a tus traducciones
¿Qué te parece esta guía?