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

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier 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 le contenu réutilisable sans compromettre l’accord grammatical, la conjugaison et les changements de l’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 déréférencer un appel de fonction et de recenser tout le contenu susceptible d’être renvoyé par cette fonction, en traitant chaque instruction `return` comme si elle était enveloppée dans un composant `<T>`.

<Callout>
  **Utilisation avancée :**
  Le composant `<Derive>` est une fonctionnalité avancée et doit être utilisé avec prudence, car il peut générer un nombre d’entrées de traduction trompeusement élevé.
  De plus, `<Derive>` impose une contrainte stricte : toutes les permutations possibles du contenu doivent pouvoir être analysées 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: 'appel de fonction',
    optional: false,
  },
}}
/>

### Description

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

### Valeur renvoyée

`React.JSX.Element` contenant le contenu rendu 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 selon les langues.

### Exigences

Les enfants des composants `<Derive>` doivent être déterminables lors du build. La syntaxe prise en charge comprend :

* 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 le résultat peut être analysé statiquement)

***

## Exemples

### Utilisation de base

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

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

Cela crée deux entrées de traduction :

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


### Avec des appels de fonction

Utilisez `<Derive>` pour gérer le contenu dynamique issu d’un appel de fonction qui influe sur la structure de la phrase.

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


### Avec des variables

Combinez `<Derive>` et `<Var>` pour gérer du contenu dynamique dans les retours statiques d’une fonction.

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


### Plusieurs composants Derive

Faites attention lorsque vous utilisez plusieurs composants `<Derive>`, car ils multiplient le nombre d’entrées de traduction.

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

Cela crée quatre entrées de traduction (2 × 2 combinaisons) :

* &quot;un garçon joue avec le ballon&quot;
* &quot;un garçon joue avec le crayon&quot;
* &quot;une fille joue avec le ballon&quot;
* &quot;une 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();
  }
}
```

***


## Limitations

### Impact sur les performances

L’utilisation de `<Derive>` peut entraîner une augmentation 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 présent dans les valeurs de retour des 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 justesse 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 c’est possible.

## Étapes suivantes

* Pour le contenu variable à l’intérieur des traductions, consultez le composant [`<Var>`](/docs/react/api/components/var).
* Pour le composant de traduction principal, consultez [`<T>`](/docs/react/api/components/t).
* Pour la version sous forme de chaîne de caractères de `<Derive>`, consultez [`derive`](/docs/react/api/strings/derive).