# gt-react: General Translation React SDK: T
URL: https://generaltranslation.com/it/docs/react/api/components/t.mdx
---
title: T
description: Riferimento API del componente T
---

{/* GENERATO AUTOMATICAMENTE: Non modificare direttamente. Modifica invece il template in content/docs-templates/. */}


## Panoramica

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

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

Il componente `<T>` supporta la traduzione sia di testo semplice sia di strutture JSX complesse.
Inoltre, offre funzionalità per gestire variabili, plurali e traduzioni specifiche in base al contesto.

<Callout>
  **Traduzione in fase di build:**
  Le traduzioni di `<T>` vengono eseguite in fase di build.
  Ciò significa che la traduzione avviene prima della distribuzione, riducendo la latenza.
  Assicurati di seguire la [guida al deployment qui](/docs/react/tutorials/quickdeploy).
</Callout>

## Riferimento

### Proprietà

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizioni

| Prop       | Descrizione                                                                                                    |
| ---------- | -------------------------------------------------------------------------------------------------------------- |
| `children` | Il contenuto da tradurre. Può includere testo semplice o strutture JSX.                                        |
| `id`       | Un identificatore univoco per la stringa di traduzione. Garantisce una traduzione coerente in tutta l&#39;app. |
| `context`  | Contesto aggiuntivo per perfezionare la traduzione. Utile per risolvere espressioni ambigue.                   |

### Restituisce

`React.JSX.Element|undefined` che contiene la traduzione renderizzata o il contenuto di fallback in base alla configurazione specificata.

***

## Comportamento

### Produzione

Durante il processo di CD, qualsiasi contenuto all&#39;interno di un `<T>` verrà tradotto prima della distribuzione dell&#39;applicazione.
Questo garantisce tempi di caricamento rapidi per tutte le impostazioni regionali, ma può tradurre solo i contenuti noti nella fase di build.

Una volta generate, le traduzioni vengono (1) memorizzate nella CDN oppure (2) nell&#39;output di build della tua app, in base alla configurazione.
Da lì, il contenuto tradotto viene servito agli utenti.
Se una traduzione non viene trovata, verrà usato il contenuto originale come fallback.

Assicurati di seguire la [guida al deployment qui](/docs/react/tutorials/quickdeploy).

### Sviluppo

Durante lo sviluppo, la funzione `<T>` traduce i contenuti su richiesta.
È utile per vedere in anteprima come apparirà la 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.

Durante la traduzione su richiesta in fase di sviluppo noterai un ritardo.
Questo ritardo non si verificherà nelle build di produzione, perché tutto sarà già stato tradotto.

***

## Esempi

### Utilizzo di base

Il componente `<T>` può tradurre semplici stringhe usando un `id` e i suoi elementi figli.
Ricorda che il componente `<T>` deve essere usato all&#39;interno di un [`<GTProvider>`](/docs/react/api/components/gtprovider) per accedere alle traduzioni.

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-react';

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


### Con variabili

Il componente `<T>` può includere variabili per contenuti dinamici nelle traduzioni.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-react';

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


### Con i plurali

Il componente `<T>` supporta anche la gestione del plurale tramite il componente `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### Limitazioni

Il componente `<T>` non traduce i contenuti dinamici.

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-react';

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

La funzione `<T>` traduce i suoi elementi figli.

```jsx title="Example.jsx" copy
import { T } from 'gt-react';

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

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // verrà tradotto // [!code highlight]

            <ValidTranslation> // verrà tradotto // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

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

<Callout>
  **Nota:** Come regola generale, verrà tradotto qualsiasi contenuto che si trovi *letteralmente* tra i due `<T>` nel file.
  Puoi sempre aggiungere un altro `<T>` per tradurre il contenuto che non viene tradotto, anche se è sconsigliato annidare i componenti `<T>`.
</Callout>

***


## Note

* Il componente `<T>` è progettato 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 racchiuso in un [`<GTProvider>`](/docs/react/api/components/gtprovider) per accedere al contesto di traduzione.

## Passaggi successivi

* Per funzionalità più avanzate come la traduzione su richiesta, le variabili, il contesto e la gestione dei plurali, consulta la documentazione sui [pattern di progettazione di `<T>`](/docs/react/guides/t).
* Per tradurre le stringhe, consulta [`useGT`](/docs/react/api/strings/use-gt).