# gt-next: General Translation Next.js SDK: Derive
URL: https://generaltranslation.com/fr/docs/next/api/components/derive.mdx
---
title: Derive
description: Référence de l’API du composant Derive
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le composant `<Derive>` sert à gérer la fragmentation des phrases et les contenus réutilisables sans compromettre l’accord grammatical, la conjugaison et les changements d’ordre des mots.
Dans l’exemple suivant, deux traductions distinctes sont créées : &quot;Le beau garçon joue avec le ballon&quot; et &quot;La belle fille joue avec le ballon&quot;.

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

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

Le composant `<Derive>` indique à l’outil CLI de résoudre un appel de fonction et de répertorier tous les contenus possibles renvoyés par cette fonction, en traitant chaque instruction `return` comme si elle était encapsulée dans un composant `<T>`.

<Callout>
  **Utilisation avancée :**
  Le composant `<Derive>` est une fonctionnalité avancée et doit être utilisé avec précaution, car il peut générer un nombre trompeusement élevé d’entrées de traduction.
  De plus, `<Derive>` impose une contrainte stricte : toutes les permutations possibles du contenu doivent être analysables statiquement.
</Callout>

Pour en savoir plus, consultez les notes de version de [gt-next@6.8.0](/devlog/gt-next_v6_8_0).

***


## Référence

### Props

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

### Description

| Propriété  | Description                                                                   |
| ---------- | ----------------------------------------------------------------------------- |
| `children` | Contenu statique. L’outil CLI analyse toutes les valeurs de retour possibles. |

### Valeur de retour

`React.JSX.Element` contenant le contenu généré par l’appel de fonction, avec une entrée de traduction distincte pour chaque résultat possible.

***

## Comportement

### Analyse au build

Pendant le processus de build, l’outil CLI analyse les enfants des composants `<Derive>` et crée des entrées de traduction distinctes pour chaque résultat possible.
Cela permet de gérer correctement les accords grammaticaux et l’ordre des mots d’une langue à l’autre.

### Exigences

Les enfants des composants `<Derive>` doivent pouvoir être déterminés au build. La syntaxe prise en charge inclut :

* Les littéraux de chaîne de caractères, numériques et booléens
* Les expressions JSX avec des composants `<Derive>` et `<Var>` imbriqués
* Les opérateurs ternaires
* Les appels de fonction (dont les résultats peuvent être analysés statiquement)

***

## Exemples

### Utilisation de base

Utilisez `<Derive>` pour gérer le contenu dynamique qui influe sur la structure de la phrase.

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

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

Cela crée deux entrées de traduction :

* &quot;Le garçon est beau&quot;
* &quot;La fille est belle&quot;


### Avec des invocations de fonction

Utilisez `<Derive>` pour gérer le contenu dynamique qui affecte la structure de la phrase lors d’une invocation de fonction.

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

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

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


### Avec des variables

Combinez `<Derive>` avec `<Var>` pour le contenu dynamique dans des valeurs de retour de fonction statiques.

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


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>
  );
}
```


### Plusieurs composants Derive

Soyez prudent lorsque vous utilisez plusieurs composants `<Derive>`, car cela multiplie les entrées de traduction.

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

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>
  );
}
```

Cela génère quatre entrées de traduction (2 × 2 combinaisons) :

* &quot;le garçon joue avec le ballon&quot;
* &quot;le garçon joue avec le crayon&quot;
* &quot;la fille joue avec le ballon&quot;
* &quot;la fille joue avec le crayon&quot;


### Syntaxes de fonction prises en charge

```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();
  }
}
```

***


## Limites

### Impact sur les performances

L’utilisation de `<Derive>` peut provoquer une croissance exponentielle du nombre d’entrées de traduction.
Chaque composant `<Derive>` supplémentaire multiplie le nombre total de traductions.

### Contenu variable

Tout contenu dynamique ou variable figurant dans le retour de fonctions statiques doit être encapsulé dans des composants `<Var>`.

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

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

***


## Remarques

* Le composant `<Derive>` est conçu pour gérer la fragmentation des phrases tout en préservant la correction grammaticale d’une langue à l’autre.
* Tenez toujours compte de l’impact sur les performances de l’utilisation de plusieurs composants `<Derive>` dans une même traduction.
* Traitez chaque instruction return dans les fonctions statiques comme si elle était encapsulée dans un composant `<T>`.
* Utilisez `<Derive>` avec discernement - privilégiez des structures de traduction plus simples lorsque possible.

## Étapes suivantes

* Pour le contenu variable dans les traductions, consultez le composant [`<Var>`](/docs/next/api/components/var).
* Pour le composant de traduction principal, consultez [`<T>`](/docs/next/api/components/t).
* Pour l’équivalent de `<Derive>` sous forme de chaîne de caractères, consultez [`derive`](/docs/next/api/strings/derive).