# General Translation React SDKs (gt-react, gt-next, gt-react-native): Обработка форм множественного числа и ветвей
URL: https://generaltranslation.com/ru/docs/react/guides/handling-plurals-and-branches.mdx
---

title: Обработка форм множественного числа и ветвей
description: Как обрабатывать формы множественного числа в React и условный переведённый контент с помощью <Plural> и <Branch>.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

В разных локалях используются разные формы множественного числа: в английском обычно есть `one` и `other`, тогда как в некоторых языках требуются дополнительные формы.

Используйте [`<Plural>`](/docs/react/reference/components/plural) для формулировок, зависящих от количества, а [`<Branch>`](/docs/react/reference/components/branch) — для другого условного контента.

## Выберите формы множественного числа или ветви [#choose]

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

Оба компонента работают одинаково в React, Next.js, TanStack Start и React Native. Различается только пакет импорта.

## Склонение по числу с `<Plural>` [#plural]

Не формируйте формы множественного числа, проверяя `count === 1` или добавляя `s`; это применимо только к английской грамматике. Передайте количество как [`n`](/docs/react/reference/components/plural#n), затем укажите формы, используемые в вашем языке-источнике. [`<Plural>`](/docs/react/reference/components/plural) выбирает правильную форму согласно [правилам множественного числа Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) для активной локали.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

Укажите [`категории множественного числа`](/docs/react/reference/components/plural#form), используемые в вашем языке-источнике; для английского обычно это `one` и `other`. Переводчики укажут категории, необходимые для каждого целевого языка, например `zero`, `two`, `few` и `many`.

Если точная категория недоступна, [`<Plural>`](/docs/react/reference/components/plural) использует ветвь `plural`, затем `other`. [`children`](/docs/react/reference/components/plural#children) отображается, только если отсутствуют обе универсальные ветви:

```tsx
<T>
  <Plural n={count} one={<>One result</>}>
    <Num>{count}</Num> results
  </Plural>
</T>;
```

## Ветвление по значению с помощью `<Branch>` [#branch]

Используйте [`<Branch>`](/docs/react/reference/components/branch), когда содержимое зависит от значения, а не от количества. Передайте значение в [`branch`](/docs/react/reference/components/branch#branch), добавьте [prop для каждого ожидаемого значения](/docs/react/reference/components/branch#value) и используйте [`children`](/docs/react/reference/components/branch#children) в качестве резервного варианта.

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

Каждая ветвь переводится отдельно, поэтому переводчики могут адаптировать её формулировку целиком, не подстраиваясь под встроенное условие JavaScript.

### Заменяйте условные выражения внутри `<T>`

Встроенный тернарный оператор делает дочерние элементы [`<T>`](/docs/react/reference/components/t) динамическими и мешает надёжному извлечению. Представьте то же условие с помощью [`<Branch>`](/docs/react/reference/components/branch):

```tsx
// ❌ Inline-условие
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Переводимые ветки
<T>
  <Branch branch={isActive} true="Active">
    Inactive
  </Branch>
</T>;
```

*Примечание: [`<Branch>`](/docs/react/reference/components/branch) игнорирует атрибуты `data-*`, поскольку незарезервированные пропсы используются как значения ветвей. Добавляйте тестовые ID и другие атрибуты данных к элементу-обёртке; правило линтера [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) выявляет эту ошибку.*
## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries