Panoramica

Il componente <Tx> traduce il contenuto JSX durante l’esecuzione.

<Tx>
    Oggi sono andato
    {" al negozio"}
    <p>
        per <b>comprare</b> un po’ di <i>spesa</i>.
    </p>
</Tx> 

Il componente <Tx> supporta la traduzione sia di testo semplice sia di strutture JSX complesse. Inoltre, offre funzionalità per gestire variabili, plurali e traduzioni specifiche al contesto. <Tx> è disponibile solo lato server.

Riferimenti

Prop

Descrizioni

Comportamento

<Tx> traduce JSX a runtime. Questo significa che le traduzioni vengono eseguite in tempo reale, quindi puoi tradurre contenuti che sono disponibili solo a runtime. Lo svantaggio è un ritardo: il caricamento di una traduzione on‑demand è sensibilmente più lento.

Durante il caricamento, <Tx> restituirà undefined a meno che le lingue siano simili (en-US vs en-GB), anche se questo comportamento può essere personalizzato con le impostazioni di rendering. In caso di errore, <Tx> restituirà il contenuto originale.

Il nostro consiglio è di tradurre il più possibile in fase di build usando <T>, getGT o useGT, e di usare le traduzioni on‑demand, come <Tx> e tx, solo quando necessario.

Assicurati di seguire la guida al deployment.

Esempi

Utilizzo di base

Il componente <Tx> traduce i suoi elementi figli a runtime.

import { Tx } from 'gt-next';

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

Con variabili

Puoi usare il componente <Var> per contrassegnare i child come variabili. Questo ti permette di indicare contenuti che non devono essere tradotti.

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

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

Con i plurali

Il componente <T> supporta anche la pluralizzazione tramite il componente <Plural>.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>Hai un elemento.</>}  
                plural={<>Hai elementi.</>}  
            />  
        </Tx>
    );
}

Limitazioni

La funzione <Tx> traduce solo i propri discendenti.

import { Tx } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>Nessuna traduzione</b></div>);

export default function Example() {
    return (
        <Tx>
            <div><b>Questo è valido!</b></div> // verrà tradotto 

            <ValidTranslation> // verrà tradotto 
                Ciao, mondo!
            </ValidTranslation>

            <InvalidTranslation /> // non verrà tradotto
        </Tx>
    );
}

Note

• Il componente <Tx> è pensato per tradurre i contenuti della tua applicazione a runtime.
• Usa il componente <Tx> per tradurre testo semplice o strutture JSX, incluse variabili e pluralizzazioni.

Prossimi passi

• Per le traduzioni in fase di build, consulta il componente <T>.
• Per funzionalità più avanzate, consulta il riferimento di <T>.
• Per tradurre le stringhe, consulta tx, getGT e useGT.