Prop children
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 20 trên 42.
Một prop đặc biệt. Viết một component có thẻ mở VÀ thẻ đóng, nội dung bạn đặt giữa hai thẻ sẽ được truyền vào prop children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<p>Any content!</p>
</Card>Card không biết cũng chẳng quan tâm bên trong có gì: nó chỉ bọc nội dung trong một hộp có kiểu dáng. Các thành phần bao bọc như thẻ, hộp thoại và bố cục đều dùng children: thành phần cha cung cấp nội dung, còn component cung cấp khung.
Thử thách
Trung bìnhTạo một khung thẻ có thể tái sử dụng.
- Cho
Cardhiển thị một<div>cóclassName="card"và hiển thịchildrenbên trong. - Trong App, dùng
<Card>...</Card>để bọc một<p>cóid="card-text"và văn bảnWelcome aboard.
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 độ.