<Tx>

Descripción general

El componente <Tx> traduce contenido jsx en tiempo de ejecución.

<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> 

El componente <Tx> 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. <Tx> es solo del lado del servidor.

Referencia

Props

Descripciones

Comportamiento

<Tx> traduce jsx en tiempo de ejecución. Esto significa que las traducciones se realizan en vivo, por lo que puedes traducir contenido que solo se conoce en tiempo de ejecución. La desventaja es que hay un retraso mientras se espera que una traducción bajo demanda se cargue, lo cual es significativamente más lento.

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

Nuestro consejo es traducir todo lo que puedas en tiempo de compilación usando <T>, getGT() o useGT(), y solo usar traducciones bajo demanda, como <Tx> y tx() cuando sea necesario.

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

Ejemplos

Uso básico

El componente <Tx> traducirá sus elementos secundarios en tiempo de ejecución.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </Tx> 
    );
}

Con variables

Puedes usar el componente <Var> para marcar elementos secundarios como variables. Esto te permite marcar contenido que no debe ser traducido.

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

export default function DynamicGreeting(user) {
    return (
        <Tx>
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}

Con plurales

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

import { Tx, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

Limitaciones

La función <Tx> solo traduce sus descendientes.

import { Tx } 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 (
        <Tx>
            <div><b>This is valid!</b></div> // will be translated 

            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>

            <InvalidTranslation /> // will not be translated
        </Tx>
    );
}

Notas

• El componente <Tx> está diseñado para traducir contenido en tu aplicación en tiempo de ejecución.
• Usa el componente <Tx> para traducir texto plano o estructuras JSX, incluyendo variables y pluralización.

Próximos pasos

• Para traducciones en tiempo de compilación, consulta el componente <T>.
• 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.