# gt-next: General Translation Next.js SDK: Derive
URL: https://generaltranslation.com/ru/docs/next/api/components/derive.mdx
---
title: Derive
description: Справочник по API компонента Derive
---

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


## Обзор

Компонент `<Derive>` используется для работы с фрагментацией предложений и повторно используемым содержимым без ущерба для грамматического согласования, спряжения и порядка слов.
В следующем примере создаются два отдельных перевода: &quot;Красивый мальчик играет с мячом&quot; и &quot;Красивая девочка играет с мячом&quot;.

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

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

Компонент `<Derive>` указывает CLI-инструменту разыменовать вызов функции и собрать в каталог весь возможный контент, который возвращает эта функция, рассматривая каждый оператор `return` так, как если бы он был обёрнут в компонент `<T>`.

<Callout>
  **Продвинутое использование:**
  Компонент `<Derive>` — это продвинутая возможность, и использовать его следует с осторожностью, так как он может создавать неожиданно большое количество записей перевода.
  Кроме того, `<Derive>` накладывает строгое требование: все возможные варианты контента должны поддаваться статическому анализу.
</Callout>

Дополнительные сведения см. в примечаниях к выпуску [gt-next@6.8.0](/devlog/gt-next_v6_8_0).

***


## Справка

### Пропсы

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

### Описание

| Prop       | Описание                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------ |
| `children` | Статическое содержимое. CLI-инструмент проанализирует все возможные возвращаемые значения. |

### Возвращает

`React.JSX.Element` с содержимым, отрендеренным при вызове функции; для каждого возможного результата создаётся отдельная запись перевода.

***

## Поведение

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

В процессе сборки CLI-инструмент анализирует дочерние элементы компонентов `<Derive>` и создает отдельные записи перевода для каждого возможного варианта.
Это обеспечивает корректное грамматическое согласование и правильный порядок слов в разных языках.

### Требования

Дочерние элементы компонентов `<Derive>` должны быть определимы на этапе сборки. Поддерживаемый синтаксис включает:

* строковые, числовые и логические литералы
* JSX-выражения с вложенными компонентами `<Derive>` и `<Var>`
* тернарные операторы
* вызовы функций (если их результаты можно статически проанализировать)

***

## Примеры

### Базовое использование

Используйте `<Derive>`, чтобы обрабатывать динамическое содержимое, которое влияет на структуру предложения.

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

Это создаёт две записи перевода:

* &quot;Мальчик красив&quot;
* &quot;Девочка красива&quot;

### С вызовами функций

Используйте `<Derive>` для обработки динамического содержимого, которое влияет на структуру предложения при вызове функции.

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


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

Используйте `<Derive>` вместе с `<Var>` для динамического содержимого в статических результатах функций.

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


### Несколько компонентов `<Derive>`

Будьте осторожны при использовании нескольких компонентов `<Derive>`, поскольку они увеличивают число единиц перевода.

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

Это создает четыре записи перевода (2 × 2 комбинации):

* &quot;мальчик играет с мячом&quot;
* &quot;мальчик играет с мелком&quot;
* &quot;девочка играет с мячом&quot;
* &quot;девочка играет с мелком&quot;


### Поддерживаемые варианты синтаксиса функций

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

***


## Ограничения

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

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

### Переменный контент

Любой динамический или переменный контент в значениях, возвращаемых статическими функциями, должен быть обёрнут в компоненты `<Var>`.

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

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

***


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

* Компонент `<Derive>` предназначен для работы с фрагментацией предложений, сохраняя грамматическую точность в разных языках.
* Всегда учитывайте влияние на производительность при использовании нескольких компонентов `<Derive>` в одном переводе.
* Рассматривайте каждый оператор return в статических функциях так, как будто он обёрнут в компонент `<T>`.
* Используйте `<Derive>` осмотрительно — по возможности выбирайте более простые структуры перевода.

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

* О работе с переменным контентом в переводах см. компонент [`<Var>`](/docs/next/api/components/var).
* Основной компонент для перевода описан в [`<T>`](/docs/next/api/components/t).
* О строковом эквиваленте `<Derive>` см. [`derive`](/docs/next/api/strings/derive).