<T>

Descripción general

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

<T> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> 

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

Referencia

Props

Descripciones

Retorna

React.JSX.Element|undefined que contiene la traducción renderizada o el contenido alternativo según la configuración proporcionada.

Comportamiento

Producción

Durante el proceso de CD, cualquier elemento 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 idiomas, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de compilació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 mostrará el contenido original como respaldo.

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 hacer prototipos de 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 puede personalizarse con la configuración de renderizado. Si ocurre un error, <T> devolverá el contenido original.

Verás una demora durante la traducción bajo demanda en desarrollo. Esta demora no ocurrirá en las compilaciones 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 elementos hijos.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T> // [!code highlight]
            Hello, world!
        </T> 
    );
}

Con variables

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

import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            Hello, <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={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  // [!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} // will create an 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>This is valid!</b></div> // will be translated // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // will not be translated
        </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 funciones más avanzadas en la Referencia de <T>.
• Para traducir cadenas, revisa tx(), getGT(), y useGT().
• Revisa cómo usar componentes de variables y cómo usar componentes de ramificación para patrones de traducción más avanzados.