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

title: Обработка множественных форм и условий
description: Как отображать контент, зависящий от количества и условий, с помощью компонентов <Plural> и <Branch> от General Translation в React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

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

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

Передайте количество в `n` и укажите дочерний элемент для каждой формы множественного числа. General Translation выбирает правильную форму для активной локали на основе правил множественного числа этой локали.

<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>

Укажите категории множественного числа, которые используются в вашем исходном языке (обычно `one` и `other`); для каждого целевого языка переводчики добавят нужные категории, например `zero`, `two`, `few` и `many`.

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

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

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

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

*Примечание: компонент `<Branch>` игнорирует любые атрибуты `data-*`. Правило линтера [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) помечает их.*
## Next steps

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