Panoramica

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

<T id="example"> // [!code highlight]
    Oggi sono andato
    {" al negozio"}
    <p>
        per <b>comprare</b> un po' di <i>spesa</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.

Riferimento

Props

Descrizioni

Restituisce

React.JSX.Element|undefined, contenente la traduzione renderizzata o il contenuto di fallback in base alla configurazione fornita.

Comportamento

Produzione

Durante il processo di CD, qualsiasi nodo figlio all’interno di <T> viene tradotto prima del deployment della tua applicazione. Questo garantisce tempi di caricamento rapidi per tutte le locale, ma può tradurre solo i contenuti noti al momento della build.

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

Assicurati di seguire la guida al deployment.

Sviluppo

Durante lo sviluppo, la funzione <T> tradurrà i contenuti su richiesta. Questo è utile per prototipare l’aspetto della tua app in lingue diverse. Ricorda di aggiungere una chiave API di sviluppo all’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 tramite le impostazioni di rendering. Se si verifica un errore, <T> restituirà il contenuto originale.

In sviluppo potresti notare un ritardo nella traduzione su richiesta. Questo ritardo non si verificherà nelle build di produzione, poiché tutto sarà già tradotto.

Esempi

Utilizzo di base

Il componente <T> può tradurre stringhe semplici usando un id e i suoi elementi figli. Ricorda: il componente <T> deve essere utilizzato all'interno di un <GTProvider> per accedere alle traduzioni.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Ciao, mondo!
        </T> 
    );
}

Con variabili

Il componente <T> può includere variabili per contenuti dinamici all'interno delle traduzioni.

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

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Ciao, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Con i plurali

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

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Hai un elemento.</>}  
                plural={<>Hai più elementi.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitazioni

Il componente <T> non traduce i contenuti dinamici.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // creerà un errore // [!code highlight]
        </T>
    );
}

La funzione <T> traduce i suoi elementi discendenti.

import { T } from 'gt-react';

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>Valido!</b></div> // verrà tradotto // [!code highlight]

            <ValidTranslation> // verrà tradotto // [!code highlight]
                Ciao, mondo! // [!code highlight]
            </ValidTranslation> // [!code highlight]

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

Note

• Il componente <T> è pensato per tradurre i contenuti della tua applicazione. È il metodo principale per la localizzazione in gt-react.
• Usa il componente <T> per tradurre testo semplice o strutture JSX, incluse variabili e forme plurali.
• Assicurati che il componente <T> sia inserito all’interno di un <GTProvider> per accedere al contesto di traduzione.

Prossimi passi

• Esplora funzionalità più avanzate come la traduzione on demand, le variabili, il contesto e la gestione dei plurali; consulta la documentazione su <T> Design Patterns.
• Per la traduzione delle stringhe, vedi useGT.