Переключение с помощью состояния
Часть раздела Основы путешествия по React на Coddy — урок 25 из 42.
Состояние — это не только числа. Булево (boolean) состояние — это стандартный переключатель для отображения и скрытия элементов:
const [isOpen, setIsOpen] = useState(false);
<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}Два трюка, работающие вместе:
setIsOpen(!isOpen):!меняет логическое значение на противоположное, поэтому одна кнопка и открывает, и закрывает{condition ? jsx : null}: рендерингnullне рендерит ничего; элемент не просто скрыт, он не существует
Задание
СреднеСоздайте компонент для раскрытия спойлера.
- Добавьте логическое состояние
revealedсо начальным значениемfalse. - Кнопка (
id="toggle") переключает его при каждом клике. - Когда состояние раскрыто, отобразите
<p>сid="secret"и текстомThe cake is real; в противном случае выполнитеrenderсо значениемnull.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React2Выражения JSX
Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX5Состояние и события
Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события