# gt-react: General Translation React SDK: Componenti variabili
URL: https://generaltranslation.com/it/docs/react/guides/variables.mdx
---
title: Componenti variabili
description: Come usare i componenti variabili per gestire contenuti dinamici nelle traduzioni
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il modello in content/docs-templates/. */}

I componenti variabili ti consentono di includere in modo sicuro contenuti dinamici all&#39;interno dei componenti [`<T>`](/docs/react/api/components/t). Gestiscono localmente la formattazione e la localizzazione senza inviare dati all&#39;API di traduzione, risultando ideali per informazioni sensibili come nomi utente, numeri di conto e dati finanziari.


## Componenti disponibili

* [`<Var>`](/docs/react/api/components/var): Contenuto dinamico non elaborato senza formattazione
* [`<Num>`](/docs/react/api/components/num): Numeri con formattazione specifica dell&#39;impostazione regionale
* [`<Currency>`](/docs/react/api/components/currency): Valori monetari con simboli e formattazione
* [`<DateTime>`](/docs/react/api/components/datetime): Date e orari secondo le convenzioni locali

## Guida rapida

I componenti variabili si usano all&#39;interno di [`<T>`](/docs/react/api/components/t) per gestire contenuti dinamici:

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-react';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```


## Come funzionano i componenti variabili

I componenti variabili risolvono il problema dei contenuti dinamici:

1. **Racchiudendo i valori dinamici** per poterli usare all&#39;interno di [`<T>`](/docs/react/api/components/t)
2. **Gestendo la formattazione in locale** tramite le API i18n integrate del browser
3. **Mantenendo privati i dati**: il contenuto non viene mai inviato all&#39;API di traduzione
4. **Fornendo la localizzazione** in base all&#39;impostazione regionale corrente dell&#39;utente

```jsx
// ❌ Questo non funziona - contenuto dinamico in <T>
<T><p>Hello {username}</p></T>

// ✅ Questo funziona - contenuto dinamico racchiuso
<T><p>Hello <Var>{username}</Var></p></T>
```


## Guida ai componenti

### Var - Contenuto dinamico non elaborato

Usa [`<Var>`](/docs/react/api/components/var) per qualsiasi contenuto dinamico che non richieda una formattazione speciale:

```jsx
// Informazioni utente
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Rendering condizionale
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - Numeri formattati

Usa [`<Num>`](/docs/react/api/components/num) per i numeri che devono rispettare le regole di formattazione dell&#39;impostazione regionale:

```jsx
// Formattazione numerica di base
<T>
  Hai <Num>{itemCount}</Num> articoli nel carrello.
</T>

// Utilizzo standalone (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Opzioni di formattazione personalizzate
<T>
  Distanza: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - Importi monetari

Usa [`<Currency>`](/docs/react/api/components/currency) per gli importi monetari:

```jsx
// Formattazione valuta di base (predefinita: "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Valute diverse
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Formattazione personalizzata
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - Date e orario

Usa [`<DateTime>`](/docs/react/api/components/datetime) per date e orario:

```jsx
// Formattazione base della data
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Formattazione dell'ora
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Formato data personalizzato
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## Privacy e sicurezza

### I dati rimangono locali

I componenti variabili gestiscono tutta la formattazione localmente tramite le [API Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) del browser. **Nessun contenuto dinamico viene inviato all&#39;API di traduzione**, perciò sono perfetti per:

* Nomi utente e informazioni personali
* Numeri di conto e ID
* Dati finanziari e saldi
* Timestamp e date private

```jsx
// Sicuro - i dati sensibili rimangono in locale
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### Eccezione importante

Fai attenzione ai componenti [`<T>`](/docs/react/api/components/t) annidati nei componenti variabili:

```jsx
// ⚠️ Il contenuto interno di <T> VERRÀ inviato per la traduzione
<T>
  <Var>
    <T>Hello, world!</T>  {/* Questo viene tradotto */}
    {privateData}         {/* Questo rimane locale */}
  </Var>
</T>
```


## Utilizzo autonomo

I componenti variabili possono essere utilizzati al di fuori di [`<T>`](/docs/react/api/components/t) per la sola formattazione:

```jsx
// Funzionano come i rispettivi metodi .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // formattazione del prezzo
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## Problemi comuni

### Ignorare le opzioni di localizzazione

Per [`<Currency>`](/docs/react/api/components/currency), assicurati di passare la prop `currency` per specificare il tipo di valuta. In questo modo, durante la visualizzazione del valore, verranno usati il simbolo e il formato della valuta corretti:

```jsx
// ❌ Predefinito a USD - potrebbe non essere ciò che gli utenti si aspettano
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Specifica esplicitamente la valuta
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

Anche altri componenti hanno prop facoltative che ti consentono di personalizzare la formattazione:

```jsx
// Formattazione di base
<T>
  <Num>{count}</Num> articoli disponibili
</T>

// Formattazione personalizzata
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> percentuale di completamento
</T>

// Formattazione della data
<T>
  Ultimo aggiornamento: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## Passaggi successivi

* [Guida ai componenti con branching](/docs/react/guides/branches) - Aggiungi logica condizionale alle traduzioni
* [Guida alla traduzione delle stringhe](/docs/react/guides/strings) - Traduci testo semplice senza JSX
* Riferimenti API:
  * [Componente `<Var>`](/docs/react/api/components/var)
  * [Componente `<Num>`](/docs/react/api/components/num)
  * [Componente `<Currency>`](/docs/react/api/components/currency)