Phép toán trong dấu ngoặc nhọn

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

Dấu ngoặc nhọn không chỉ chứa biến: mọi biểu thức (expression) JavaScript đều dùng được. Phép toán, phương thức chuỗi, lời gọi hàm:

const price = 6;
const quantity = 5;

return <p>Total: {price * quantity}</p>;
// hiển thị: Total: 30

React đánh giá biểu thức và hiển thị kết quả. Bạn có thể kết hợp văn bản và dấu ngoặc nhọn thoải mái trong cùng một phần tử:

<p>{quantity} items at {price} each</p>

Một thứ KHÔNG nằm trong dấu ngoặc nhọn: các câu lệnh. if, for và những từ khóa tương tự không phải là biểu thức. Bạn sẽ gặp các cách thay thế tương thích với JSX trong một chương sau.

Thử thách

Người mới

Tạo một hóa đơn nhỏ. Thành phần này khai báo price và quantity.

Cho đoạn văn có id="total" hiển thị Total: 30, nhưng hãy tính số đó từ các biến bằng *, đừng nhập 30.

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>