Dấu ngoặc nhọn trong thuộc tính

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

Dấu ngoặc nhọn cũng hoạt động trong thuộc tính (attribute). Thay dấu ngoặc kép bằng dấu ngoặc nhọn, rồi giá trị thuộc tính sẽ lấy từ JavaScript:

const level = 'warning';

return <p className={level}>Check this!</p>;

Giờ đây, class của đoạn văn sẽ nhận giá trị mà biến (variable) đang giữ: đổi level thành 'error' thì class cũng đổi theo. Đây là cách các ứng dụng React chuyển đổi kiểu dáng dựa trên dữ liệu.

Hãy chú ý kỹ đến cú pháp: className={level}, không có dấu ngoặc kép bao quanh dấu ngoặc nhọn. className="{level}" (có dấu ngoặc kép) sẽ đặt lớp thành văn bản nguyên văn {level}.

Thử thách

Dễ

Đoạn văn cảnh báo nên lấy lớp CSS từ biến level.

Đặt className của đoạn văn thành giá trị của level bằng cách dùng dấu ngoặc nhọn (lớp của nó cuối cùng phải là warning).
Đừng nhập từ warning vào thuộc tính. Hãy dùng biến.

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>