Wyświetlanie za pomocą &&
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 34 z 42.
Często nie ma else: chcesz po prostu, żeby coś się pojawiło, gdy warunek jest spełniony. Sztuczka z && pozwala wyświetlić coś albo nic:
{unread > 0 && <span>You have {unread} new messages</span>}Jak to działa: && zwraca prawą stronę, gdy lewa jest prawdziwa, a React ją renderuje. Gdy lewa jest fałszywa, nic się nie renderuje. To operator warunkowy bez fragmentu : null:
{cond ? <X /> : null} // to samo co
{cond && <X />}
Wyzwanie
ŁatwyPokaż plakietkę skrzynki odbiorczej tylko wtedy, gdy jest coś do przeczytania. Komponent definiuje unread.
- Używając
&&, renderuj<span>zid="badge"i tekstem3 new messages(zbuduj liczbę ze zmiennej!), ale tylko wtedy, gdyunreadjest większe niż 0.
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React4Props
Czym są propsy?Przekazywanie propsówDwa propsyTen sam komponent, nowe daneProp childrenPodsumowanie: propsy7Warunki i listy
Renderowanie warunkowe operatorem trójargumentowymWyświetlanie za pomocą &&Renderowanie listyKlucze mają znaczenieFiltruj, a następnie mapujPodsumowanie: warunki i listy