Тернарный рендеринг
Часть раздела Основы путешествия по React на Coddy — урок 33 из 42.
Фигурные скобки JSX не могут содержать инструкцию if, но в них отлично помещается тернарный оператор, и он покрывает практически любой выбор «или/или» на экране:
{isLoggedIn ? 'Welcome back!' : 'Please log in'}Сначала условие, затем значение для true, затем значение для false. Обе стороны могут быть полноценными элементами JSX:
{isLoggedIn
? <p>Welcome back!</p>
: <button>Log in</button>}Свяжите это со состоянием, и страница будет переключаться на лету: измените boolean-значение, и React перерендерит другую ветку.
Задание
ЛегкоСоздайте строку состояния входа.
- Добавьте логическое состояние
loggedInс начальным значениемfalse. - Кнопка (
id="login") переключает его при каждом клике. - Абзац (
id="status") отображаетWelcome back!, когда выполнен вход, иPlease log inв противном случае, используя тернарный оператор.
Попробуйте сами
<!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Итоги: Знакомство с React4Пропсы (Props)
Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы7Условия и списки
Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки