<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 estructuras JSX complejas. Además, proporciona funciones para manejar variables, plurales y traducciones específicas según el contexto. <Tx> es solo para el 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 compensación 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 configuraciones 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 admite 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 su aplicación en tiempo de ejecución.
• Use 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 características más avanzadas en la Referencia de <T>.
• Para traducir cadenas, consulta tx(), getGT() y useGT().
• Revisa usando componentes de variable y usando componentes de ramificación para patrones de traducción más avanzados.