# react-native: derive
URL: https://generaltranslation.com/fr/docs/react-native/api/strings/derive.mdx
---
title: derive
description: Référence de l’API pour la fonction de dérivation de chaîne derive()
---

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


## Vue d’ensemble

La fonction `derive` permet d’utiliser des appels de fonction statiques ou des expressions de variable dans la traduction d’une chaîne.
C’est utile pour écrire du code réutilisable, internationaliser des phrases fragmentées et préserver les accords grammaticaux.

```jsx
const getDisplayName = (condition) => {
  return condition ? "User" : 'Admin';
};

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crée deux entrées de traduction :
// "User says hello." -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

Cela fonctionne en générant des traductions distinctes pour chaque résultat possible, ce qui permet de préserver les accords grammaticaux, la conjugaison et les changements d’ordre des mots selon les langues.

<Callout>
  **Entrées de traduction multiples :**
  `derive` crée des entrées de traduction distinctes pour chaque résultat possible de la fonction encapsulée, ce qui peut considérablement augmenter le nombre de traductions.
  Utilisez cette fonctionnalité avec discernement et privilégiez les instructions `select` d’ICU lorsque le facteur multiplicatif devient excessif.
</Callout>

<Callout>
  **Analyse statique :**
  `derive` ne peut analyser que le contenu connu au moment du build.
  Tout contenu dynamique (variables, appels d’API, etc.) doit être encapsulé avec `declareVar`.
</Callout>

## Référence

### Paramètres

| Nom       | Type                                                         | Description                                                     |
| --------- | ------------------------------------------------------------ | --------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Un appel de fonction statique renvoyant un contenu traduisible. |

### Retourne

Retourne `content` de type `T`.

***

## Comportement

### Analyse au build

Pendant le processus de build, l’outil CLI :

1. Analyse la fonction encapsulée par `derive`
2. Détermine toutes les valeurs de retour possibles de la fonction (elles doivent pouvoir être analysées statiquement au build)
3. Crée des entrées de traduction distinctes pour chaque résultat possible

### Considérations sur les performances

Comme `<Derive>`, `derive` multiplie les entrées de traduction.
Chaque appel de fonction avec plusieurs résultats possibles crée des traductions distinctes, et plusieurs appels à `derive` dans la même chaîne multiplient exponentiellement le nombre total d’entrées.

***

## Exemple

### Contenu réutilisable

Vous pouvez utiliser `derive` pour gérer des fragments de phrase ou du contenu réutilisable avec des appels de fonction.

```jsx copy
import { derive, gt } from 'gt-react-native';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Phrases fragmentées

Vous pouvez utiliser `derive` pour gérer les phrases fragmentées dans les appels de fonction.

```jsx copy
import { derive, gt } from 'gt-react-native';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```


### Accord

Sans `derive`, traduire l’accord est syntaxiquement lourd.
Vous devez ajouter une instruction `select` pour gérer l’accord (pluriel, genre, etc.).
Ensuite, vous devez aussi énumérer chaque résultat possible.

```jsx copy
import { gt } from 'gt-react-native';

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

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

Avec `derive`, la gestion de l’accord devient triviale.
Aucune instruction `select` n’est nécessaire, et vous n’avez pas besoin de spécifier chaque cas.

```jsx copy
import { derive, declareVar, gt } from 'gt-react-native';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```

En utilisant `derive`, l’outil CLI identifie que `getSubject` a deux résultats possibles et crée une entrée de traduction pour chacune d’elles.
Ainsi, l’accord est géré automatiquement.

* &quot;Le garçon joue&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;La fille joue&quot; -&gt; &quot;*La* niña está jugando&quot;

### Avec des variables

Vous pouvez combiner `derive` et `declareVar` pour gérer du contenu dynamique.

```jsx copy
import { derive, declareVar, gt } from 'gt-react-native';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```


### Fonctions complexes

Les fonctions peuvent contenir plusieurs branches conditionnelles et des instructions `return`.

```jsx copy
import { derive, gt } from 'gt-react-native';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```


### Expressions et logique intégrées

Vous pouvez intégrer directement de la logique dans l’appel à `derive`.

```jsx copy
import { derive, gt } from 'gt-react-native';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

***


## Remarques

* Utilisez `derive` avec discernement, car cela peut augmenter de manière exponentielle le nombre d&#39;entrées de traduction
* Tous les résultats possibles doivent être analysables statiquement au moment du build
* Les variables dans les fonctions statiques doivent être encapsulées avec `declareVar`

## Étapes suivantes

* Consultez [`declareVar`](/docs/react-native/api/strings/declare-var) pour marquer le contenu dynamique dans des fonctions statiques
* Consultez [`decodeVars`](/docs/react-native/api/strings/decode-vars) pour extraire les valeurs d’origine des variables déclarées
* Consultez [`<Derive>`](/docs/react-native/api/components/derive) pour l’équivalent en JSX
* Lisez les [notes de version](/devlog/gt-next_v6_12_0) pour plus d’informations