# react-native: T
URL: https://generaltranslation.com/it/docs/react-native/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 principale metodo di traduzione di `gt-react-native`.

```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 dipendenti dal contesto.

<Callout>
  **Traduzione in fase di build:**
  Le traduzioni di `<T>` avvengono in fase di build.
  Ciò significa che la traduzione avviene prima della distribuzione, per ridurre la latenza.
  Assicurati di seguire la [guida alla distribuzione qui](/docs/react-native/tutorials/quickdeploy).
</Callout>


## Riferimento

### Props

<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 sottoposta a rendering o il contenuto di fallback in base alla configurazione fornita.

***

## Comportamento

### Produzione

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

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

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

### Sviluppo

Durante lo sviluppo, la funzione `<T>` traduce i contenuti su richiesta.
Questo è utile per fare prototipi di 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.

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

***

## Esempi

### Utilizzo di base

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

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

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


### Con variabili

Il componente `<T>` può includere variabili per gestire contenuti dinamici all&#39;interno delle traduzioni.

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

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-native';

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-native';

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

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

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

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 non è consigliabile 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-native`.
* 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-native/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-native/guides/t).
* Per tradurre le stringhe, consulta [`useGT`](/docs/react-native/api/strings/use-gt).