Отображение с помощью &&
Часть раздела Основы путешествия по React на Coddy — урок 34 из 42.
Часто ветка else не нужна: вы просто хотите, чтобы что-то отображалось при выполнении условия. Трюк с && подходит для случая «показать или ничего»:
{unread > 0 && <span>You have {unread} new messages</span>}Как это работает: && возвращает правую часть, когда левая истинна (true), и React рендерит её. Когда левая часть ложна (false), ничего не рендерится. Это тот же тернарный оператор, у которого отрезали : null:
{cond ? <X /> : null} // то же самое
{cond && <X />}
Задание
ЛегкоПоказывайте значок входящих сообщений только тогда, когда есть что прочитать. Компонент определяет unread.
- Используя
&&, рендерите<span>сid="badge"и текстом3 new messages(подставьте число из переменной!), но только еслиunreadбольше 0.
Попробуйте сами
<!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Условия и списки
Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки