Несколько вариантов: Switch и Match

Когда вариантов больше двух, вложенные Show становятся неудобными. Для выбора одной ветки из нескольких в Solid есть пара компонентов Switch и Match — аналог конструкции switch или цепочки if ... else if.

Switch и Match

Switch проверяет вложенные Match сверху вниз и выводит первый, у которого условие when истинно:

// src/components/TodoFilter.jsx
import { createSignal, Switch, Match } from 'solid-js';
 
export default function TodoFilter() {
  const [filter, setFilter] = createSignal('all');
 
  return (
    <div>
      <button onClick={() => setFilter('all')}>Все</button>
      <button onClick={() => setFilter('active')}>Активные</button>
      <button onClick={() => setFilter('done')}>Выполненные</button>
 
      <Switch>
        <Match when={filter() === 'all'}>
          <p>Показаны все задачи</p>
        </Match>
        <Match when={filter() === 'active'}>
          <p>Показаны активные задачи</p>
        </Match>
        <Match when={filter() === 'done'}>
          <p>Показаны выполненные задачи</p>
        </Match>
      </Switch>
    </div>
  );
}

Выведите <TodoFilter /> в src/App.jsx. Нажатие на кнопку меняет текст под кнопками, и на странице всегда виден только один абзац.

fallback

Если ни одно условие не подошло, Switch выводит содержимое атрибута fallback:

// src/components/TodoStatus.jsx
import { Switch, Match } from 'solid-js';
 
export default function TodoStatus(props) {
  return (
    <Switch fallback={<span>Неизвестно</span>}>
      <Match when={props.status === 'new'}>
        <span>Новая</span>
      </Match>
      <Match when={props.status === 'progress'}>
        <span>В работе</span>
      </Match>
      <Match when={props.status === 'done'}>
        <span>Готово</span>
      </Match>
    </Switch>
  );
}

Использование: <TodoStatus status="progress" /> покажет «В работе», а <TodoStatus status="paused" /> — «Неизвестно».

Применение фильтра к списку

Сам список удобнее фильтровать производной функцией, а Switch оставить для разной разметки:

// src/components/TodoFilter.jsx
const visible = () => {
  if (filter() === 'active') return todos().filter((t) => !t.done);
  if (filter() === 'done') return todos().filter((t) => t.done);
  return todos();
};

Затем <For each={visible()}> выведет только подходящие задачи.

Когда что использовать

Ситуация	Компонент
Показать или скрыть	`Show`
Два варианта	`Show` с `fallback`
Три и больше вариантов	`Switch` и `Match`

Частая ошибка

Ставить внутрь Switch что-то кроме Match:

// src/components/TodoStatus.jsx
import { Switch, Match } from 'solid-js';
 
export default function TodoStatus(props) {
  return (
    <Switch>
      {/* Неправильно: обычный тег внутри Switch */}
      {/* <p>Статус:</p> */}
      <Match when={props.status === 'done'}>
        <span>Готово</span>
      </Match>
    </Switch>
  );
}

Switch понимает только Match. Общий текст вроде «Статус:» выносите за пределы Switch.

Спасибо, что читаете!