<T>

Resumen

El componente <T> es el método principal de traducción en gt-next.

<T> // [!code highlight]
    Hoy, fui a
    {" la tienda"}
    <p>
        para <b>comprar</b> algunos <i>víveres</i>.
    </p>
</T> 

El componente <T> admite la traducción de texto plano así como estructuras complejas de JSX. Además, proporciona características para manejar variables, plurales y traducciones específicas de contexto.

Referencia

Props

Descripciones

Retornos

React.JSX.Element|undefined que contiene la traducción renderizada o contenido alternativo basado en la configuración proporcionada.

Comportamiento

Producción

Durante el proceso de CD, cualquier hijo dentro de un <T> será traducido antes de que tu aplicación sea desplegada. Esto asegura tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en el momento de la construcción.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de construcción de tu aplicación, según tu configuración. Desde allí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se recurrirá al contenido original.

Asegúrate de seguir la guía de despliegue aquí.

Desarrollo

Durante el desarrollo, la función <T> traducirá el contenido bajo demanda. Esto es útil para prototipar cómo se verá tu aplicación en diferentes idiomas. Recuerda agregar una clave de API de desarrollo a tu entorno para habilitar este comportamiento.

Mientras se carga, <T> devolverá undefined a menos que los idiomas sean similares (en-US vs en-GB), aunque este comportamiento se puede personalizar con configuraciones de renderizado. Si ocurre un error, <T> devolverá el contenido original.

Verás un retraso durante la traducción bajo demanda en desarrollo. Este retraso no ocurrirá durante las construcciones de producción a menos que el contenido se esté traduciendo explícitamente bajo demanda, es decir, usando <Tx> o tx().

Ejemplos

Uso básico

El <T> traducirá sus hijos.

import { T } from 'gt-next';
 
export default function Greeting() {
    return (
        <T> // [!code highlight]
            ¡Hola, mundo!
        </T> 
    );
}

Con variables

Puedes usar el componente <Var> para marcar hijos como variables. Esto te permite marcar contenido que no debe ser traducido. Usualmente, los componentes <Var> envuelven contenido dinámico.

import { T, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <T>
            ¡Hola, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Con plurales

El componente <T> también soporta pluralización usando el componente <Plural>.

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count}  
                singular={<>Tienes un artículo.</>}  
                plural={<>Tienes artículos.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitaciones

El componente <T> no traduce contenido que es dinámico.

import { T } from 'gt-next';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // creará un error // [!code highlight]
        </T>
    );
}

La función <T> traduce sus descendientes.

import { T } from 'gt-next';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);
 
export default function Example() {
    return (
        <T>
            <div><b>¡Esto es válido!</b></div> // será traducido // [!code highlight]
 
            <ValidTranslation> // será traducido // [!code highlight]
                ¡Hola, mundo! // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // no será traducido
        </T>
    );
}

Notas

• El componente <T> está diseñado para traducir contenido en tu aplicación. Es el método principal para la localización en gt-next.
• Usa el componente <T> para traducir texto plano o estructuras JSX, incluyendo variables y pluralización.
• Si usas el componente <T> en el lado del cliente, asegúrate de que esté envuelto en un <GTProvider> para acceder al contexto de traducción.

Próximos pasos

• Para traducciones bajo demanda, consulta el componente <Tx>.
• Consulta características más avanzadas en la Referencia de <T>.
• Para traducir cadenas, consulta tx(), getGT(), y useGT().
• Revisa el uso de componentes variables y el uso de componentes de ramificación para patrones de traducción más avanzados.