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

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


## Panoramica

Il componente `<Derive>` viene utilizzato per gestire la frammentazione delle frasi e i contenuti riutilizzabili senza compromettere la concordanza, la coniugazione e le variazioni dell&#39;ordine delle parole.
Nell&#39;esempio seguente vengono create due traduzioni separate: &quot;Il bel ragazzo gioca con la palla&quot; e &quot;La bella ragazza gioca con la palla&quot;.

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

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

Il componente `<Derive>` indica allo strumento CLI di dereferenziare una chiamata di funzione e catalogare tutti i possibili contenuti restituiti da tale funzione, trattando ogni istruzione `return` come se fosse racchiusa in un componente `<T>`.

<Callout>
  **Utilizzo avanzato:**
  Il componente `<Derive>` è una funzionalità avanzata e va usato con cautela, perché può generare un numero di voci di traduzione ingannevolmente elevato.
  Inoltre, `<Derive>` richiede rigorosamente che tutte le possibili permutazioni del contenuto siano analizzabili staticamente.
</Callout>

Per ulteriori informazioni, consulta le note di rilascio di [gt-next@6.8.0](/devlog/gt-next_v6_8_0).

***


## Riferimento

### Props

<TypeTable
  type={{
  children: {
    type: 'function invocation',
    optional: false,
  },
}}
/>

### Descrizione

| Prop       | Descrizione                                                                         |
| ---------- | ----------------------------------------------------------------------------------- |
| `children` | Contenuto statico. Lo strumento CLI analizzerà tutti i possibili valori di ritorno. |

### Restituisce

`React.JSX.Element` contenente il contenuto sottoposto a rendering dalla chiamata di funzione, con una voce di traduzione separata per ciascun risultato possibile.

***

## Comportamento

### Analisi in fase di build

Durante il processo di build, lo strumento CLI analizza gli elementi figli dei componenti `<Derive>` e crea voci di traduzione separate per ciascun risultato possibile.
Questo consente di gestire correttamente la concordanza grammaticale e l&#39;ordine delle parole nelle diverse lingue.

### Requisiti

Gli elementi figlio dei componenti `<Derive>` devono poter essere determinati in fase di build. La sintassi supportata include:

* Valori letterali stringa, numerici e booleani
* Espressioni JSX con componenti `<Derive>` e `<Var>` annidati
* Operatori ternari
* Chiamate di funzione (con risultati analizzabili staticamente)

***

## Esempi

### Utilizzo di base

Usa `<Derive>` per gestire i contenuti dinamici che influiscono sulla struttura della frase.

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

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

Questo crea due voci di traduzione:

* &quot;Il ragazzo è bello&quot;
* &quot;La ragazza è bella&quot;


### Con chiamate di funzione

Usa `<Derive>` per gestire il contenuto dinamico che influisce sulla struttura della frase in una chiamata di funzione.

```jsx title="BasicExample.jsx" copy
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>
  );
}
```


### Con variabili

Combina `<Derive>` con `<Var>` per gestire contenuti dinamici all&#39;interno di valori di ritorno statici delle funzioni.

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


function getTitle(title) {
  return title === 'Mr.' ? 'Mr.' : 'Ms.';
}

function getGreeting(title) {
  return (
    <>
      Hello, <Derive>{getTitle(title)}</Derive>. How are you, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Derive>{getGreeting(title)}</Derive>
    </T>
  );
}
```


### Componenti `<Derive>` multipli

Fai attenzione quando usi più componenti `<Derive>`, perché moltiplicano le voci di traduzione.

```jsx title="MultipleDerive.jsx" copy
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>
  );
}
```

Questo crea quattro voci di traduzione (2 × 2 combinazioni):

* &quot;il ragazzo gioca con la palla&quot;
* &quot;il ragazzo gioca con il pastello&quot;
* &quot;la ragazza gioca con la palla&quot;
* &quot;la ragazza gioca con il pastello&quot;

### Sintassi delle funzioni supportata

```jsx title="SupportedSyntax.jsx" copy
function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return 'The boy';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          Hello, <Derive>{getTitle(title)}</Derive>. How are you,{' '}
          <Var>{name}</Var>?
        </>
      );
    case 'ternary':
      return condition ? 'The boy' : 'The girl';
    case 'function_calls':
      return otherStaticFunction();
  }
}
```

***


## Limitazioni

### Impatto sulle prestazioni

L&#39;uso di `<Derive>` può causare una crescita esponenziale delle voci di traduzione.
Ogni componente `<Derive>` aggiuntivo moltiplica il numero totale delle traduzioni.

### Contenuto variabile

Qualsiasi contenuto dinamico o variabile presente nei valori restituiti da funzioni statiche deve essere racchiuso in componenti `<Var>`.

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

// Errato - causerà errori di build
function getContent() {
  return <>Hello, {userName}!</>;
}
```

***


## Note

* Il componente `<Derive>` è progettato per gestire la frammentazione delle frasi mantenendo la correttezza grammaticale tra lingue diverse.
* Considera sempre l&#39;impatto sulle prestazioni dell&#39;uso di più componenti `<Derive>` in una singola traduzione.
* Tratta ogni istruzione `return` nelle funzioni statiche come se fosse racchiusa in un componente `<T>`.
* Usa `<Derive>` con criterio: quando possibile, preferisci strutture di traduzione più semplici.

## Passaggi successivi

* Per i contenuti variabili all&#39;interno delle traduzioni, vedi il componente [`<Var>`](/docs/react/api/components/var).
* Per il componente di traduzione principale, vedi [`<T>`](/docs/react/api/components/t).
* Per l&#39;equivalente in forma di stringa di `<Derive>`, vedi [`derive`](/docs/react/api/strings/derive).