# General Translation React SDKs (gt-react, gt-next): Деривация
URL: https://generaltranslation.com/ru/docs/react/reference/components/derive.mdx
---

title: Деривация
description: Помечайте конечные варианты содержимого для извлечения внутри перевода с помощью General Translation gt-react. Справочник API для Derive.

---

Компонент `<Derive>` позволяет разбивать предложения на фрагменты и использовать повторяющееся содержимое без потери согласования слов, спряжения или порядка слов. Он указывает CLI каталогизировать все возможные значения своих children и создавать отдельную запись перевода для каждого.

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах импорт выполняется из `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

## Обзор [#overview]

Оберните значение или вызов функции, результат которых может меняться. CLI обрабатывает каждый возможный результат так, как если бы он был обёрнут в отдельный [`<T>`](/docs/react/reference/components/t).

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

Это создает две записи перевода: &quot;The beautiful boy plays with the ball&quot; и &quot;The beautiful girl plays with the ball&quot;.

*Примечание: `<Derive>` — это продвинутая функция. Она может сгенерировать неожиданно большое количество записей перевода, и каждый возможный вариант содержимого должен поддаваться статическому анализу. О строковом варианте см. [`derive`](/docs/react/reference/functions/derive).*

## Как это работает [#how-it-works]

* **Анализ на этапе сборки.** Во время сборки CLI анализирует дочерние элементы каждого `<Derive>` и создаёт отдельную запись перевода для каждого возможного результата, чтобы грамматическое согласование и порядок слов правильно учитывались в каждом языке.
* **Без изменений при выполнении.** Во время выполнения `<Derive>` рендерит вычисленные дочерние элементы как есть; деривация влияет только на извлечение.
* **Требование статичности.** Дочерние элементы должны однозначно определяться на этапе сборки. Поддерживаемый синтаксис включает строковые, числовые и булевы литералы; JSX-выражения с вложенными `<Derive>` и [`<Var>`](/docs/react/reference/components/var); тернарные операторы; и вызовы функций со статически анализируемыми результатами. Динамические значения должны быть обёрнуты в `<Var>`.

## Пропсы [#props]

| Prop                    | Описание                                                          | Type        | Необязательно | По умолчанию |
| ----------------------- | ----------------------------------------------------------------- | ----------- | ------------- | ------------ |
| [`children`](#children) | Статический контент, возможные значения которого анализирует CLI. | `ReactNode` | Нет           | —            |

### `children` [#children]

**Тип** `ReactNode` · **Обязательно**

Статическое содержимое — литерал, тернарное выражение или вызов функции со статически анализируемыми результатами. CLI генерирует одну запись перевода для каждого возможного значения.

## Примеры [#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>
  );
}
// Создаёт: "The boy is beautiful" и "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>
  );
}
// Создаёт четыре записи (2 × 2): boy/girl × ball/crayon
```

## Ограничения [#limitations]

* **Экспоненциальный рост.** Каждый дополнительный `<Derive>` увеличивает общее количество записей перевода в разы. Используйте его с осторожностью и по возможности выбирайте более простые структуры.
* **Переменное содержимое должно быть обернуто.** Любое динамическое или переменное содержимое в результатах статических функций должно быть обернуто в [`<Var>`](/docs/react/reference/components/var), иначе при сборке возникнет ошибка.

```tsx
// ✅ Правильно
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// ❌ Неправильно — вызывает ошибки сборки
function getContent() {
  return <>Hello, {userName}!</>;
}
```