# gt-react: General Translation React SDK: деривация
URL: https://generaltranslation.com/ru/docs/react/api/strings/derive.mdx
---
title: деривация
description: Справочник по API строковой функции derive()
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}


## Обзор

Функция `derive` позволяет использовать в переводимой строке вызовы статических функций и выражения с переменными.
Это полезно для написания переиспользуемого кода, интернационализации фрагментированных предложений и сохранения грамматического согласования слов.

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

gt(`${derive(getDisplayName(condition))} says hello.`);
// Создаёт две записи перевода:
// "User says hello." -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

Это работает за счет генерации отдельных переводов для каждого возможного результата, что позволяет сохранять согласование слов, спряжение и изменения порядка слов в разных языках.

<Callout>
  **Несколько записей перевода:**
  `derive` создает отдельные записи перевода для каждого возможного результата оборачиваемой функции, из-за чего количество переводов может значительно вырасти.
  Используйте эту возможность с осторожностью и отдавайте предпочтение операторам ICU `select`, если число комбинаций становится слишком большим.
</Callout>

<Callout>
  **Статический анализ:**
  `derive` может анализировать только содержимое, известное на этапе сборки.
  Любое динамическое содержимое (переменные, вызовы API и т. д.) должно быть обернуто в `declareVar`.
</Callout>

## Справочник

### Параметры

| Имя       | Тип                                                          | Описание                                                        |
| --------- | ------------------------------------------------------------ | --------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Статический вызов функции, возвращающий переводимое содержимое. |

### Возвращаемое значение

Возвращает `content` типа `T`.

***

## Поведение

### Анализ на этапе сборки

В процессе сборки CLI-инструмент:

1. Анализирует функцию, обёрнутую в `derive`
2. Определяет все возможные значения, которые может возвращать функция (они должны поддаваться статическому анализу на этапе сборки)
3. Создаёт отдельные записи перевода для каждого уникального результата

### Влияние на производительность

Как и `<Derive>`, `derive` увеличивает число записей перевода.
Каждый вызов функции с несколькими возможными результатами создает отдельные переводы, а несколько вызовов `derive` в одной строке увеличивают общее число записей экспоненциально.

***

## Пример

### Переиспользуемый контент

Вы можете использовать `derive` для работы с фрагментированными предложениями или для переиспользуемого контента с вызовами функций.

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

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


### Фрагментированные предложения

Вы можете использовать `derive` для работы с фрагментированными предложениями при вызове функций.

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

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

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


### Согласование

Без `derive` реализовать перевод с согласованием синтаксически громоздко.
Нужно добавить оператор select, чтобы учесть согласование (число, род и т. д.).
Затем нужно также перечислить все возможные варианты.

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

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

С деривацией грамматическое согласование больше не вызывает трудностей.
Не нужен ни оператор select, ни явное перечисление всех вариантов.

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

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

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

При использовании `derive` CLI-инструмент определяет, что у `getSubject` есть два возможных варианта результата, и создает отдельную запись перевода для каждого из них.
Благодаря этому согласование выполняется автоматически.

* &quot;Мальчик играет&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;Девочка играет&quot; -&gt; &quot;*La* niña está jugando&quot;


### С переменными

Вы можете использовать `derive` вместе с `declareVar` для работы с динамическим содержимым.

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

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


### Сложные функции

Функции могут содержать несколько условных ветвей и операторов `return`.

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

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


### Встроенные выражения и логика

Вы можете встраивать логику прямо в вызов `derive`.

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

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

***


## Примечания

* Используйте `derive` с осторожностью, так как это может экспоненциально увеличить число записей перевода
* Все возможные результаты должны поддаваться статическому анализу на этапе сборки
* Переменные внутри статических функций должны быть обёрнуты в `declareVar`

## Следующие шаги

* См. [`declareVar`](/docs/react/api/strings/declare-var), чтобы помечать динамическое содержимое в статических функциях
* См. [`decodeVars`](/docs/react/api/strings/decode-vars), чтобы извлекать исходные значения из объявленных переменных
* См. [`<Derive>`](/docs/react/api/components/derive) — JSX-эквивалент
* Подробнее см. в [примечаниях к выпуску](/devlog/gt-next_v6_12_0)