Hai props
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 18 trên 42.
Các component thường nhận nhiều props. Liệt kê tất cả trong phần phân rã và kết hợp chúng vào JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// hiển thị: Laptop costs $999Hãy chú ý đến các kiểu dữ liệu: name là chuỗi (có dấu ngoặc kép), price là số (có dấu ngoặc nhọn). Việc giữ số ở dạng số rất quan trọng khi bạn tính toán với chúng.
Thử thách
DễTạo một dòng sản phẩm cho cửa hàng.
- Viết
Productnhận các propnamevàprice, rồi hiển thị{name} costs ${price}trong đoạn văn của nó. - Trong App, hiển thị một Product với name
Laptopvà price999(dưới dạng số!). Trang sẽ hiển thịLaptop costs $999.
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>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.