Обзор

Компонент <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-react';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} 
      black={<p>У них тёмные волосы.</p>}
      brown="У них русые волосы." // (можно передать строку, если удобнее)
      blonde={<p>У них светлые волосы.</p>}
    />
  );
}

Резервное содержимое

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

import { Branch } from 'gt-react';

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-react';

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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-react';

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> // [!code highlight]
      </Branch>
    </T>
  );
}

Примечания

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

Следующие шаги

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