# General Translation React SDKs (gt-react, gt-next): Derive
URL: https://generaltranslation.com/fr/docs/react/reference/components/derive.mdx
---

title: Derive
description: Marquez les variantes finies de contenu à extraire dans une traduction avec General Translation gt-react. Référence de l’API pour Derive.

---

Le composant `<Derive>` gère la segmentation des phrases et le contenu réutilisable sans sacrifier les accords grammaticaux, la conjugaison ni l’ordre des mots. Il indique à la CLI de répertorier chaque valeur possible de ses éléments enfants et de créer une entrée de traduction distincte pour chacune.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Encapsulez une valeur ou un appel de fonction dont le résultat peut varier. Le CLI traite chaque résultat possible comme s’il était encapsulé dans son propre [`<T>`](/docs/react/reference/components/t).

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

Cela produit deux entrées : &quot;Le beau garçon joue avec le ballon&quot; et &quot;La belle fille joue avec le ballon&quot;.

*Remarque : `<Derive>` est une fonctionnalité avancée. Elle peut générer un nombre d’entrées de traduction bien plus élevé qu’il n’y paraît, et chaque permutation de contenu possible doit être analysable statiquement. Pour la version sous forme de `string`, voir [`derive`](/docs/react/reference/functions/derive).*

## Comment ça fonctionne [#how-it-works]

* **Analyse au build.** Pendant le build, le CLI analyse les éléments enfants de chaque `<Derive>` et crée une entrée de traduction distincte pour chaque résultat possible, afin que l’accord grammatical et l’ordre des mots soient correctement gérés dans chaque langue.
* **Affichage inchangé au runtime.** Au runtime, `<Derive>` affiche ses éléments enfants résolus tels quels ; la dérivation n’affecte que l’extraction.
* **Exigence statique.** Les éléments enfants doivent pouvoir être déterminés au build. La syntaxe prise en charge comprend les littéraux de chaîne, numériques et booléens ; les expressions JSX avec des `<Derive>` imbriqués et [`<Var>`](/docs/react/reference/components/var) ; les opérateurs ternaires ; et les invocations de fonction dont les résultats peuvent être analysés statiquement. Les valeurs dynamiques doivent être encapsulées dans `<Var>`.

## Props [#props]

| Prop                    | Description                                                            | Type        | Facultatif | Par défaut |
| ----------------------- | ---------------------------------------------------------------------- | ----------- | ---------- | ---------- |
| [`children`](#children) | Contenu statique dont les valeurs possibles sont analysées par le CLI. | `ReactNode` | Non        | —          |

### `children` [#children]

**Type** `ReactNode` · **Obligatoire**

Contenu statique — un littéral, une expression ternaire ou une invocation de fonction dont les résultats peuvent être analysés statiquement. Le CLI génère une entrée de traduction pour chaque valeur possible.

## Exemples [#examples]

```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>
  );
}
// Crée : "The boy is beautiful" et "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>
  );
}
// Crée quatre entrées (2 × 2) : boy/girl × ball/crayon
```

## Limites [#limitations]

* **Croissance exponentielle.** Chaque `<Derive>` supplémentaire multiplie le nombre total d’entrées de traduction. Utilisez-le avec parcimonie et privilégiez des structures plus simples lorsque c’est possible.
* **Le contenu variable doit être encapsulé.** Tout contenu dynamique ou variable dans les retours de fonctions statiques doit être encapsulé dans [`<Var>`](/docs/react/reference/components/var), sinon la compilation échoue.

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

// ❌ Incorrect — provoque des erreurs de build
function getContent() {
  return <>Hello, {userName}!</>;
}
```