# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Branch>`
URL: https://generaltranslation.com/ru/docs/react/reference/components/branch.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Условно отображайте содержимое в зависимости от значения. Справочник API для компонента `<Branch>`.

Компонент `<Branch>` добавляет в перевод условную логику. Вы передаёте значение в `branch`, и он отображает соответствующий проп child.

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.*

## Обзор [#overview]

Укажите значение `branch` и проп child для каждого возможного значения.

```tsx
<Branch
  branch={status}
  active={<p>The user is active.</p>}
  inactive={<p>The user is inactive.</p>}
/>
```

*Примечание: поместите `<Branch>` внутрь [`<T>`](/docs/react/reference/components/t), чтобы перевести варианты, и оберните динамические значения внутри них в компонент для переменных, например [`<Var>`](/docs/react/reference/components/var).*

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

* **Сопоставление значений.** Значение `branch` сопоставляется с переданными вами ключами проп. Отображается содержимое соответствующего проп.
* **Резервный вариант.** Если `branch` не указан или его значение не совпадает ни с одним ключом проп, в качестве резервного варианта отображается `children`. `<Branch>` никогда не выбрасывает ошибку.

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

| Prop                    | Описание                                            | Type                          | Необязательный | По умолчанию |
| ----------------------- | --------------------------------------------------- | ----------------------------- | -------------- | ------------ |
| [`branch`](#branch)     | Значение, определяющее, какой контент будет выбран. | `string \| number \| boolean` | Да             | —            |
| [`children`](#children) | Резервный контент, если по `branch` нет совпадений. | `ReactNode`                   | Да             | —            |
| [`[value]`](#value)     | Контент для конкретного значения `branch`.          | `ReactNode`                   | Да             | —            |

### `branch` [#branch]

**Тип** `string | number | boolean` · **Необязательно**

Значение, определяющее, какая ветка будет отображаться. Если `branch` не указан или его значение не соответствует ни одному ключу пропа ветки, вместо неё в качестве резервного содержимого отображается `children`.

### `children` [#children]

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

Резервное содержимое, которое отображается, если ни один проп `branch` не совпадает со значением `branch`.

### `[value]` [#value]

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

Проп для каждого возможного значения `branch`. Каждый ключ соответствует значению `branch`, и его содержимое рендерится при совпадении с этим значением. Вместо JSX можно использовать строку.

## Примеры [#examples]

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

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

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." // plain string тоже подойдёт
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

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>}
    >
      {/* [!code highlight] */}
      <p>Their hair is unknown.</p>
    </Branch>
  );
}
```

```tsx title="BranchExample.tsx"
import { T, Branch, Var } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <T>
      <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>}
      >
        {/* [!code highlight] */}
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}
```

## Примечания [#notes]

* Ключи веток могут быть любыми строковыми значениями, совпадающими с пропом `branch`, поэтому `<Branch>` можно адаптировать под самые разные сценарии.
* Комбинируйте `<Branch>` с [`<T>`](/docs/react/reference/components/t) и [variable components](/docs/react/guides/formatting-variables), чтобы работать с переводимым динамическим контентом.
* Для контента, зависящего от количества, используйте [`<Plural>`](/docs/react/reference/components/plural).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.