Cùng một component, dữ liệu mớ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 19 trên 42.
Kết hợp khả năng tái sử dụng và props, bạn sẽ có mẫu thực sự: một component được hiển thị nhiều lần với dữ liệu khác nhau.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Ba huy hiệu, ba nhãn, một định nghĩa. Mọi danh sách, trình đơn, bảng tin và thư viện ảnh bạn từng thấy trên web đều theo mẫu này (sau này, mình thậm chí sẽ tạo các bản sao từ một mảng).
Thử thách
DễTriển khai các huy hiệu khuyến mãi của cửa hàng.
- Cho
Badgenhận proplabelvà hiển thị prop này bên trong<span>. - Bên trong
<div id="badges">, hiển thị hai huy hiệu: huy hiệu đầu tiên có nhãnNew, tiếp theo là huy hiệu có nhãnSale.
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 độ.