Wyświetlanie za pomocą &&

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 34 z 42.

Często nie ma else: chcesz po prostu, aby coś się pojawiło, gdy warunek jest spełniony. Sztuczka z && obsługuje wyświetlanie albo niewyświetlanie niczego:

{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. W przypadku wartości logicznej po lewej stronie to wyrażenie warunkowe z obciętym : null:

{cond ? <X /> : null}   // to samo co
{cond && <X />}

Dlatego w przykładzie sprawdzane jest unread > 0. Gdy użyjesz {unread && <span>...</span>}, a wartość unread będzie równa 0, && zwróci 0, a React wyrenderuje tę wartość na stronie.

Wyzwanie

Łatwy

Wyświetl plakietkę skrzynki odbiorczej tylko wtedy, gdy jest coś do przeczytania. Komponent definiuje unread.

Używając &&, renderuj <span> z id="badge" i tekstem 3 new messages (utwórz liczbę na podstawie zmiennej!), ale tylko wtedy, gdy unread jest 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>