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

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


## Обзор

Компонент `<Branch>` позволяет добавлять в перевод условную логику.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>
```

Вы передаёте значение в параметр `branch`, и по указанным вами ключам ему сопоставляется возвращаемое значение.


## Справка

### Свойства

<TypeTable
  type={{
  "branch": {
      description: 'Имя ветки для отображения.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'Резервное содержимое',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "[key]: string": {
      type: 'string | JSX.Element',
      optional: false,
  },
}}
/>

Синтаксис `[key]: string` указывает на произвольные ключи, представляющие возможные ветки.
Например, можно добавить в качестве параметров такие ветки, как `active` и `inactive`.

| Свойство        | Описание                                                                                                                                                          |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `branch`        | Имя ветки для отображения.                                                                                                                                        |
| `children`      | Резервное содержимое, которое будет отображаться, если подходящая ветка не найдена.                                                                               |
| `[key]: string` | Ветки, представляющие возможное содержимое для заданного значения ветки. Каждый ключ соответствует отдельной ветке, а его значение — содержимому для отображения. |

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

`JSX.Element` с содержимым для указанной ветки или резервным содержимым.

### Выбрасывает

`Error`, если проп `branch` не указан или имеет недопустимое значение.

## Примеры

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

`<Branch>` должен возвращать разный результат для каждого возможного значения пропа `branch`.

В этом примере значение `user.hairColor` используется, чтобы определить, что будет выведено.
Мы определили пропы `black`, `brown` и `blonde` в соответствии с возможными значениями `user.hairColor`.

```jsx title="BranchExample.jsx" copy
import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (можно передать строку, если хотите)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Резервное содержимое

`children` всегда используется как запасной вариант, если ни один проп не соответствует значению, переданному в `branch`.

```jsx title="BranchExample.jsx" copy
import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}
```


### Перевод содержимого Branch

Если вы хотите перевести содержимое, оберните его в компонент `<T>`.

```jsx title="BranchExample.jsx" copy
import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### Добавление переменных

Если вы хотите отображать динамические значения в ветке, обязательно оборачивайте их в компоненты `<Currency>`, `<DateTime>`, `<Num>` или `<Var>`.

```jsx title="BranchExample.jsx" copy
import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

***


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

* Ключи для веток могут быть любыми строковыми значениями, соответствующими пропсу branch. Такая гибкость позволяет легко адаптировать `<Branch>` к широкому спектру сценариев использования.
* Комбинируйте `<Branch>` с другими компонентами, например с `<T>` для перевода и [переменными компонентами](/docs/next/guides/variables) для динамического контента, чтобы создавать богатые и локализованные интерфейсы.

## Что дальше

* Более продвинутые сценарии использования и примеры см. в разделе [Использование компонентов ветвления](/docs/next/guides/branches).