Обзор

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

const status = 'active';
<Branch branch={status}
    active={<p>Пользователь активен.</p>}
    inactive={<p>Пользователь неактивен.</p>}
/>

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

Справочные материалы

Свойства

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

Возвращает

JSX.Element, содержащий содержимое, соответствующее указанной ветке, либо запасное содержимое.

Исключения

Выбрасывает Error, если проп branch не передан или недействителен.

Примеры

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

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

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

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>У них тёмные волосы.</p>}
      brown="У них волосы среднего оттенка." // (you can pass a string if you prefer)
      blonde={<p>У них светлые волосы.</p>}
    />
  );
}

Резервный контент

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

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>У них тёмные волосы.</p>}
      brown={<p>У них волосы среднего оттенка.</p>}
      blonde={<p>У них светлые волосы.</p>}
    >
      <p>Цвет их волос неизвестен.</p> // [!code highlight]
    </Branch>
  );
}

Перевод <Branch>

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

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>У них тёмные волосы.</p>}
        brown={<p>У них волосы среднего оттенка.</p>}
        blonde={<p>У них светлые волосы.</p>}
      >
        <p>Цвет их волос неизвестен.</p> 
      </Branch>
    </T> 
  );
}

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

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

import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>У них тёмные волосы.</p>}
        brown={<p>У них волосы среднего оттенка.</p>}
        blonde={<p>У них светлые волосы.</p>}
      >
        <p>Неподдерживаемый цвет волос: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Примечания

• Ключи веток могут быть любыми строковыми значениями, соответствующими пропсу branch. Такая гибкость упрощает адаптацию <Branch> к самым разным сценариям.
• Комбинируйте <Branch> с другими компонентами — например, с <T> для переводов и компонентами переменных для динамического контента — чтобы создавать богатые, локализованные интерфейсы.

Дальнейшие шаги

• Для более продвинутых сценариев и примеров см. раздел Использование ветвящихся компонентов.