Условия: Show

Условный вывод — это показ разной разметки в зависимости от данных: сообщение «Задач нет» для пустого списка, кнопка «Выйти» только для вошедшего пользователя. В Solid для этого есть встроенный компонент Show.

Show

Show выводит своё содержимое, когда условие в атрибуте when истинно:

// src/components/TodoHint.jsx
import { createSignal, Show } from 'solid-js';
 
export default function TodoHint() {
  const [visible, setVisible] = createSignal(false);
 
  return (
    <div>
      <button onClick={() => setVisible(!visible())}>Подсказка</button>
      <Show when={visible()}>
        <p>Нажмите на задачу, чтобы отметить её выполненной.</p>
      </Show>
    </div>
  );
}

Каждое нажатие на кнопку показывает или скрывает абзац. Когда условие ложно, абзаца нет в DOM вообще.

fallback

Атрибут fallback задаёт то, что показать, если условие ложно:

// src/components/TodoSummary.jsx
import { Show } from 'solid-js';
 
export default function TodoSummary(props) {
  return (
    <Show when={props.count > 0} fallback={<p>Задач нет</p>}>
      <p>Задач в списке: {props.count}</p>
    </Show>
  );
}

Использование: <TodoSummary count={todos().length} />. При пустом списке выводится «Задач нет», иначе — число задач.

Значение внутри Show

Если в when передать объект, содержимое можно записать функцией. Она получает это значение в виде функции-геттера, причём уже гарантированно не пустое:

// src/components/Profile.jsx
import { createSignal, Show } from 'solid-js';
 
export default function Profile() {
  const [user, setUser] = createSignal(null);
 
  return (
    <div>
      <Show when={user()} fallback={<button onClick={() => setUser({ name: 'Анна' })}>Войти</button>}>
        {(u) => <p>Здравствуйте, {u().name}</p>}
      </Show>
    </div>
  );
}

До нажатия видна кнопка «Войти», после — приветствие «Здравствуйте, Анна».

Почему не тернарный оператор

Тернарный оператор и && в Solid тоже реактивны. Show удобнее читать, он поддерживает fallback и не пересоздаёт содержимое, если условие изменилось с одного истинного значения на другое.

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

Ставить ранний return с условием в тело компонента:

// src/components/TodoSummary.jsx
export default function TodoSummary(props) {
  // Неправильно: проверка выполнится один раз
  if (props.count === 0) return <p>Задач нет</p>;
 
  return <p>Задач в списке: {props.count}</p>;
}

Тело компонента выполняется один раз, поэтому разметка выбирается навсегда при создании. Условия, которые могут измениться, переносите в JSX через Show.