# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Derive>`
URL: https://generaltranslation.com/it/docs/react/reference/components/derive.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Contrassegna varianti finite di contenuto da estrarre all'interno di una traduzione. Riferimento API per il componente `<Derive>`.

Il componente `<Derive>` gestisce la suddivisione delle frasi e il contenuto riutilizzabile senza compromettere la concordanza grammaticale, la coniugazione o l&#39;ordine delle parole. Indica alla CLI di catalogare tutti i possibili valori del contenuto figlio e di creare una voce di traduzione separata per ciascuno.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.*

## Panoramica [#overview]

Racchiudi un valore o una chiamata di funzione il cui risultato può variare. La CLI considera ogni possibile esito come se fosse racchiuso nel proprio [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  The beautiful <Derive>{getSubject(gender)}</Derive> plays with the ball.
</T>
```

Questo produce due voci: &quot;Il bel ragazzo gioca con la palla&quot; e &quot;La bella ragazza gioca con la palla&quot;.

*Nota: `<Derive>` è una funzionalità avanzata. Può generare un numero sorprendentemente elevato di voci di traduzione e ogni possibile combinazione di contenuti deve essere analizzabile staticamente. Per la forma stringa, vedi [`derive`](/docs/react/reference/functions/derive).*

## Come funziona [#how-it-works]

* **Analisi in fase di build.** Durante la build, la CLI analizza il contenuto figlio di ogni `<Derive>` e crea una voce di traduzione separata per ogni possibile esito, così l&#39;accordo grammaticale e l&#39;ordine delle parole vengono gestiti correttamente in ogni lingua.
* **Rendering invariato a runtime.** A runtime, `<Derive>` esegue il rendering del contenuto figlio risolto così com&#39;è; la derivazione influisce solo sull&#39;estrazione.
* **Requisito statico.** Il contenuto figlio deve essere determinabile in fase di build. La sintassi supportata include letterali di tipo stringa, numerico e booleano; espressioni JSX con `<Derive>` annidati e [`<Var>`](/docs/react/reference/components/var); operatori ternari; e invocazioni di funzione con esiti analizzabili staticamente. I valori dinamici devono essere racchiusi in [`<Var>`](/docs/react/reference/components/var).

## Props [#props]

| Prop                    | Descrizione                                                         | Type        | Facoltativo | Predefinito |
| ----------------------- | ------------------------------------------------------------------- | ----------- | ----------- | ----------- |
| [`children`](#children) | Contenuto statico i cui possibili valori sono analizzati dalla CLI. | `ReactNode` | No          | —           |

### `children` [#children]

**Tipo** `ReactNode` · **Obbligatorio**

Contenuto statico: un valore letterale, un&#39;espressione ternaria o un&#39;invocazione di funzione con esiti analizzabili staticamente. La CLI genera una voce di traduzione per ogni valore possibile.

## Esempi [#examples]

*Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

```tsx title="BasicExample.tsx"
import { T, Derive } from 'gt-react';

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
    </T>
  );
}
// Crea: "The boy is beautiful" e "The girl is beautiful"
```

```tsx title="FunctionInvocation.tsx"
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{getSubject(gender)}</Derive> is beautiful.
    </T>
  );
}
```

```tsx title="MultipleDerive.tsx"
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}
function getObject(toy) {
  return toy === 'ball' ? 'ball' : 'crayon';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Derive>{getSubject(gender)}</Derive> plays with the{' '}
      <Derive>{getObject(toy)}</Derive>.
    </T>
  );
}
// Crea quattro voci (2 × 2): boy/girl × ball/crayon
```

## Limitazioni [#limitations]

* **Crescita esponenziale.** Ogni `<Derive>` aggiuntivo moltiplica il numero totale di voci di traduzione. Usalo con giudizio e, quando possibile, preferisci strutture più semplici.
* **Il contenuto variabile deve essere racchiuso.** Qualsiasi contenuto dinamico o variabile nei valori restituiti da funzioni statiche deve essere racchiuso in [`<Var>`](/docs/react/reference/components/var), altrimenti la build fallisce.

```tsx
// ✅ Corretto
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// ❌ Errato — causa errori di build
function getContent() {
  return <>Hello, {userName}!</>;
}
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.