Panoramica

Il componente <T> è il principale metodo di traduzione in gt-next.

<T>
    Oggi sono andato
    {" al negozio"}
    <p>
        a <b>comprare</b> un po' di <i>generi alimentari</i>.
    </p>
</T>

Il componente <T> supporta la traduzione di testo semplice e di strutture JSX complesse. Inoltre, offre funzionalità per gestire variabili, plurali e traduzioni dipendenti dal contesto.

Riferimenti

Proprietà

Descrizioni

Restituisce

React.JSX.Element|undefined, che contiene la traduzione renderizzata oppure il contenuto di fallback in base alla configurazione fornita.

Comportamento

Produzione

Durante il processo di CD, tutti i contenuti figli all’interno di <T> vengono tradotti prima che l’applicazione venga distribuita. Questo garantisce tempi di caricamento rapidi per tutte le località, ma può tradurre solo i contenuti noti al momento della build.

Una volta generate, le traduzioni vengono (1) archiviate nel CDN oppure (2) incluse nell’output di build della tua app, in base alla configurazione. Da lì, il contenuto tradotto viene erogato ai tuoi utenti. Se una traduzione non è disponibile, verrà utilizzato il contenuto originale.

Assicurati di seguire la guida al deployment qui.

Sviluppo

Durante lo sviluppo, la funzione <T> tradurrà i contenuti on demand. Questo è utile per prototipare l’aspetto della tua app in lingue diverse. Ricorda di aggiungere una chiave API Dev al tuo ambiente per abilitare questo comportamento.

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

In sviluppo noterai un ritardo durante la traduzione on demand. Questo ritardo non si verificherà nelle build di produzione a meno che il contenuto non venga esplicitamente tradotto on demand, cioè utilizzando <Tx> o tx.

Esempi

Utilizzo di base

Il componente <T> traduce il contenuto al suo interno.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Ciao, mondo!
        </T>
    );
}

Con variabili

Puoi usare il componente <Var> per contrassegnare gli elementi figli come variabili. Questo ti consente di indicare contenuti che non devono essere tradotti. Di solito, i componenti <Var> racchiudono contenuti dinamici.

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

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

Con i plurali

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

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

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

Limitazioni

Il componente <T> non traduce i contenuti dinamici.

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* causerà un errore */}
        </T>
    );
}

La funzione <T> traduce i suoi elementi discendenti.

import { T } 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 (
        <T>
            <div><b>Questo è valido!</b></div> {/* verrà tradotto */}

            
            <ValidTranslation>
                Ciao, mondo!  {/* verrà tradotto */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* non verrà tradotto */}
        </T>
    );
}

Note

• Il componente <T> è progettato per tradurre i contenuti dell’applicazione. È il metodo principale per la localizzazione in gt-next.
• Usa il componente <T> per tradurre testo semplice o strutture JSX, incluse variabili e forme plurali.
• Se utilizzi il componente <T> sul client, assicurati che sia avvolto da un <GTProvider> per accedere al contesto di traduzione.

Prossimi passi

• Per traduzioni on demand, consulta il componente <Tx>.
• Per funzionalità più avanzate, vedi la reference di <T>.
• Per tradurre stringhe, consulta tx, getGT e useGT.