Hiển thị với &&

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 34 trên 42.

Thường thì không cần else: bạn chỉ muốn hiển thị nội dung nào đó khi điều kiện đúng. Mẹo && xử lý việc hiển thị hoặc không hiển thị gì:

{unread > 0 && <span>You have {unread} new messages</span>}

Cách hoạt động: && trả về vế phải khi vế trái là true, và React hiển thị vế phải. Khi vế trái là false, không có gì được hiển thị. Với một giá trị boolean ở vế trái, biểu thức này tương đương với biểu thức ba ngôi đã bỏ phần : null:

{cond ? <X /> : null}   // tương đương với
{cond && <X />}

Đó là lý do ví dụ kiểm tra unread > 0. Với {unread && <span>...</span>} và unread bằng 0, && trả về 0 và React hiển thị giá trị đó trên trang.

Thử thách

Dễ

Chỉ hiển thị huy hiệu hộp thư đến khi có tin nhắn cần đọc. Thành phần định nghĩa unread.

Dùng &&, hiển thị <span> có id="badge" và văn bản 3 new messages (tạo số từ biến!), nhưng chỉ khi unread lớn hơn 0.

Tự làm thử

<!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>