Which syntax allows you to conditionally render JSX with a && operator?

4 phương ánCó giải thích

Các phương án trả lời

Chọn một phương án
Lời giảiChọn phương án để mở

Đáp án đúng: "function Greeting({ isAdmin }) {

Lời giải
return ( <> <h1>Welcome!</h1> {
  isAdmin && <p>You have administrative privileges.</p>
}

</> ); }". Trong JSX, cặp ngoặc nhọn mở chế độ biểu thức JavaScript; biểu thức isAdmin && thẻ p trả về thẻ p khi isAdmin là true, còn khi isAdmin là false nó trả về false và React không hiển thị gì, nên lời chào luôn hiện còn dòng thông báo quyền chỉ hiện với quản trị viên. Lưu ý nếu vế trái là số 0 thì React sẽ in ra số 0, nên vế trái nên là boolean. Phương án viết "</h1> isAdmin && <p> " thiếu ngoặc nhọn, nên chữ isAdmin && trở thành văn bản thường hiện thẳng ra màn hình, còn thẻ p luôn được render bất kể isAdmin. Cách viết "{isAdmin ? <p> " xuất hiện ở hai phương án có nội dung giống hệt nhau và đều sai cú pháp: toán tử ba ngôi bắt buộc có nhánh sau dấu hai chấm, thiếu nó trình biên dịch báo lỗi; muốn dùng ba ngôi thì phải thêm nhánh null, còn câu hỏi yêu cầu dùng toán tử &&.

Cùng phần 2

Xuất hiện trong 1 bộ đề