Ветвление компонентов
Как использовать ветвление компонентов для условного содержимого в переводах
Компоненты ветвления позволяют условно выводить содержимое внутри компонентов <T>. Они обрабатывают динамическую логику — например, конструкции if/else и правила множественного числа — и при этом обеспечивают корректный перевод всех вариантов содержимого.
Доступные компоненты
<Branch>: Условное отображение на основе значений или состояний<Plural>: Автоматическое образование множественного числа по правилам локали
Быстрый старт
Компоненты ветвления работают внутри <T> и используются для обработки условной логики:
import { T, Branch, Plural, Num, Var } from 'gt-next';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> сейчас онлайн</p>}
away={<p><Var>{user.name}</Var> отошёл</p>}
>
<p>Статус пользователя <Var>{user.name}</Var> неизвестен</p>
</Branch>
<Plural
n={messageCount}
one={<p>У вас <Num>{messageCount}</Num> сообщение</p>}
other={<p>У вас <Num>{messageCount}</Num> сообщений</p>}
/>
</T>
);
}Как работают ветвящиеся компоненты
Ветвящиеся компоненты решают задачу условного рендеринга в переводах путем:
- Замены тернарных операторов и условной логики внутри
<T> - Предоставления запасного содержимого, когда условия не совпадают с ожидаемыми значениями
- Возможности перевода всех вариантов содержимого
- Автоматического соблюдения правил локали для множественного числа
// ❌ Это не работает — условная логика внутри <T>
<T><p>{isActive ? 'Пользователь активен' : 'Пользователь не активен'}</p></T>
// ✅ Это работает — условная логика с ветвлением
<T>
<Branch
branch={isActive}
true={<p>Пользователь активен</p>}
false={<p>Пользователь не активен</p>}
/>
</T>Руководство по компоненту
<Branch> — условный контент
Используйте <Branch> для условного рендеринга на основе значений или состояний:
// Отображение статуса пользователя
<T>
<Branch
branch={user.role}
admin={<p>Панель администратора</p>}
user={<p>Панель пользователя</p>}
guest={<p>Гостевой доступ</p>}
>
<p>Уровень доступа неизвестен</p>
</Branch>
</T>
// Логические условия
<T>
<Branch
branch={isLoggedIn}
true={<p>С возвращением!</p>}
false={<p>Войдите в систему</p>}
/>
</T>
// Тарифы подписки
<T>
<Branch
branch={subscription.tier}
free={<p>Обновите тариф, чтобы открыть премиальные функции</p>}
premium={<p>Наслаждайтесь премиум‑возможностями</p>}
enterprise={<p>Свяжитесь со службой поддержки по корпоративным решениям</p>}
>
<p>Статус подписки недоступен</p>
</Branch>
</T><Plural> — интеллектуальные формы множественного числа
Используйте <Plural> для контента, который меняется в зависимости от количества:
// Базовая плюрализация
<T>
<Plural
n={itemCount}
one={<p><Num>{itemCount}</Num> товар в корзине</p>}
few={<p><Num>{itemCount}</Num> товара в корзине</p>}
many={<p><Num>{itemCount}</Num> товаров в корзине</p>}
other={<p><Num>{itemCount}</Num> товара в корзине</p>}
/>
</T>
// Обработка нуля
<T>
<Plural
n={notifications}
zero={<p>Нет новых уведомлений</p>}
one={<p><Num>{notifications}</Num> уведомление</p>}
few={<p><Num>{notifications}</Num> уведомления</p>}
many={<p><Num>{notifications}</Num> уведомлений</p>}
other={<p><Num>{notifications}</Num> уведомления</p>}
/>
</T>
// Сложная плюрализация (следует правилам Unicode CLDR)
<T>
<Plural
n={days}
zero={<p>Срок истекает сегодня</p>}
one={<p>Срок истекает через <Num>{days}</Num> день</p>}
few={<p>Срок истекает через <Num>{days}</Num> дня</p>}
many={<p>Срок истекает через <Num>{days}</Num> дней</p>}
other={<p>Срок истекает через <Num>{days}</Num> дня</p>}
/>
</T>Совмещение с вариативными компонентами
Ветвления и вариативные компоненты безупречно работают вместе:
<T>
<Branch
branch={order.status}
pending={
<p>
Заказ <Var>{order.id}</Var> в обработке.
Итого: <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
Заказ <Var>{order.id}</Var> отправлен <DateTime>{order.shippedDate}</DateTime>
</p>
}
delivered={
<p>Заказ <Var>{order.id}</Var> успешно доставлен</p>
}
>
<p>Статус заказа неизвестен</p>
</Branch>
</T>Когда использовать ветвящиеся компоненты
Замените тернарные операторы
Преобразуйте условную логику для использования внутри <T>:
// ❌ В <T> нельзя использовать тернарный оператор
<T>{isActive ? <p>Активный пользователь</p> : <p>Неактивный пользователь</p>}</T>
// ✅ Вместо этого используйте Branch
<T>
<Branch
branch={isActive}
true={<p>Активный пользователь</p>}
false={<p>Неактивный пользователь</p>}
/>
</T>Обрабатывайте несколько условий
Замените инструкции switch или цепочки if/else:
// ❌ Сложная логика условий
<T>
{status === 'loading' ? <p>Загрузка…</p> :
status === 'error' ? <p>Ошибка</p> :
status === 'success' ? <p>Готово!</p> :
<p>Неизвестный статус</p>}
</T>
// ✅ Чистая логика ветвлений
<T>
<Branch
branch={status}
loading={<p>Загрузка…</p>}
error={<p>Ошибка</p>}
success={<p>Готово!</p>}
>
<p>Неизвестный статус</p>
</Branch>
</T>Правила множественного числа
Замените ручную обработку множественного числа:
// ❌ Ручная обработка множественного числа
<T>{count === 1 ? <p>1 элемент</p> : <p>{count} элементов</p>}</T>
// ✅ Автоматическая обработка множественного числа
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> элемент</p>}
other={<p><Num>{count}</Num> элементов</p>}
/>
</T>Автономное использование
Ветвящиеся компоненты можно использовать и вне <T> — для чистой логики без перевода:
// Чистый условный рендеринг
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Чистая множественная форма
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Частые проблемы
Отсутствующие ключи ветвления
Всегда указывайте резервное содержимое для неподходящих значений:
// ❌ Нет обработки непредвиденных значений
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// А что, если userRole — «moderator»?
/>
// ✅ Всегда добавляйте обработчик по умолчанию
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Обработчик по умолчанию для любого другого значения */}
</Branch>Неполные формы множественного числа
Укажите необходимые формы множественного числа для локали по умолчанию:
// ❌ Отсутствует форма "other"
<Plural
n={count}
one={<p>1 item</p>}
// А что насчёт 0, 2, 3 и т. д.?
/>
// ✅ Укажите обязательные формы
<Plural
n={count}
zero={<p>Нет элементов</p>}
one={<p>1 элемент</p>}
other={<p>{count} элементов</p>}
/>Сложная вложенная логика
Хотя это работает, мы рекомендуем упрощать разветвлённую логику и избегать глубокой вложенности:
// ❌ Сложное вложенное ветвление
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Сложно читать и поддерживать */}
</Branch>
</Branch>
// ✅ Упростите логику или используйте несколько компонентов
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Подробнее о правилах образования множественного числа — в документации Unicode CLDR.
Дальнейшие шаги
- Руководство по переводу строк — Перевод простого текста без JSX
- Руководство по динамическому контенту — Обработка перевода во время выполнения
- Справочные материалы по API:
- Компонент
<Branch>
- Компонент
Насколько полезно это руководство?