Глава 14. Условный рендеринг без боли
Зачем эта глава
В реальных интерфейсах часто нужно показывать элементы только при определённых условиях: например, кнопку «Выйти» — только для авторизованных пользователей.
Теория (коротко)
В JSX можно использовать обычные условия JavaScript: if, тернарный оператор и логические выражения.
{isLoggedIn ? <Profile /> : <Login />}
{isAdmin && <AdminPanel />}
Подсказка: сложные условия лучше выносить в переменные перед return.
Задания
Задание: условия
- Сделай кнопку «Войти/Выйти».
- Покажи блок «Админ» только при флаге.
- Спрячь сообщение, если список пуст.
Проверка себя
Ты умеешь управлять отображением элементов через условия.
Мини-проект
Цель: статус пользователя.
Требования: показ «Гость» или «Пользователь» в зависимости от state.
Критерий готовности: переключение статуса меняет интерфейс.
Словарь главы
- Условный рендеринг
- Показ или скрытие элемента в зависимости от условия.
- Тернарный оператор
- Короткая форма if/else.