Truyền 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 17 trên 42.
Hãy kết nối một prop từ đầu đến cuối. Có ba bước, lúc nào cũng giống nhau:
// 1. nhận giá trị
function Greeting({ name }) {
// 2. sử dụng giá trị
return <p>Hello, {name}!</p>;
}
// 3. truyền giá trị
<Greeting name="Ada" />Chuỗi được đặt trong dấu ngoặc kép. Số và biểu thức dùng dấu ngoặc nhọn, theo cùng quy tắc như thuộc tính:
<Score points={97} />
Thử thách
Người mớiThành phần Greeting bỏ qua mọi thứ bạn truyền vào.
- Hãy để
Greetingnhận propnamevà hiển thịHello, {name}!trong đoạn văn của nó. - Trong App, truyền
name="Ada"để trang hiển thịHello, Ada!.
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 độ.