Tôi đã phát triển với React trong nhiều tháng mà không hiểu hết sức mạnh thực sự của mô hình thành phần React. Một ngày nọ, tôi quyết định đi sâu vào sáng tác, và đây là điều tôi học được
Thành phần phản ứng và trẻ emTrong React, một thành phần có thể có một, nhiều hoặc không có con. Tuyệt vời, nhưng khoan đã — “trẻ em” là gì?
Thành phần Profile
có hai con. ProfileImage
và ProfileDetails
, trong khi hai người này không có con
“Trong các biểu thức JSX chứa cả thẻ mở và thẻ đóng, nội dung giữa các thẻ đó được truyền dưới dạng một chỗ dựa đặc biệt.
props.children
” —
Về cơ bản, props.children
là một chỗ dựa đặc biệt, được tự động chuyển đến mọi thành phần, có thể được sử dụng để hiển thị nội dung bao gồm giữa thẻ mở và thẻ đóng khi gọi một thành phần. Các loại thành phần này được xác định bằng "hộp"
Xác định các thành phần theo cú pháp JSX
Trong , một thành phần có con luôn được xác định bằng thẻ mở và thẻ đóng. Mỗi đứa trẻ phải được đặt giữa hai thẻ này, giống như chúng ta đã thấy ở trên. Khi một thành phần không có con, bạn có thể gọi nó bằng hoặc
, nhưng cú pháp sau thường được ưu tiên hơn. Mục đích của thẻ tự đóng là làm cho mã ngắn hơn và dễ đọc hơn
đạo cụ. trẻ em trong hành động
Giả sử rằng chúng ta muốn tạo một thành phần ImageSlider
. Mục tiêu của chúng tôi là gọi thành phần giống như thế này
Như bạn có thể thấy, _______________ bao gồm một số ________ _______ có thể được truy cập và hiển thị thông qua props.children
Nhờ có props.children
, chúng tôi có thể lồng nội dung của mình vào bên trong một thành phần, giống như chúng tôi lồng các phần tử HTML phổ biến
Loại nội dung nào được phép sử dụng props. những đứa trẻ?
Nội dung được chuyển đến một thành phần thông qua props.children
ProfileImage
3, ProfileImage
4, Boolean, một số, một chuỗi, một hoặc một mảng thuộc bất kỳ loại nào trong số này theo cách đệ quy. Nó cũng có thể là một hàm trả về một trong các loại này
Xin lưu ý rằng, như đã đề cập trong , ProfileImage
5, ProfileImage
4, ProfileImage
3 và ProfileImage
8 là những phần tử con hợp lệ, nhưng chúng sẽ bị bỏ qua và không được hiển thị. Nếu bạn muốn kết xuất ProfileImage
5, ProfileImage
8, ProfileImage
4 hoặc ProfileImage
3, trước tiên bạn phải
Tại sao ProfileDetails
3 lại quan trọng như vậy?
props.children
cho phép chúng tôi soạn các thành phần và do đó, giao diện mặt trước của chúng tôi là kết quả;
“React có một mô hình thành phần mạnh mẽ và chúng tôi khuyên bạn nên sử dụng thành phần thay vì kế thừa để sử dụng lại mã giữa các thành phần. ” — Tài liệu về phản ứng
Như đã đề cập trong phần , đôi khi bạn có thể cần lấp đầy nhiều “lỗ hổng” trong một thành phần. Trong những trường hợp như vậy, thay vì sử dụng props.children
, việc xác định nhiều đạo cụ tùy chỉnh có thể là cách tiếp cận phù hợp hơn;
Phản ứng. Những đứa trẻ
“
ProfileDetails
6 cung cấp các tiện ích để xử lý cấu trúc dữ liệu mờ đục củaprops.children
” — Tài liệu phản ứng
Tại sao props.children
là một “cấu trúc dữ liệu không rõ ràng”?
Bởi vì props.children
có thể bao gồm một, nhiều hoặc không có phần tử con nào, có nghĩa là giá trị của nó có thể là một nút con duy nhất, một mảng các nút con hoặc props.children
0 tương ứng. Nhờ có API props.children
1, chúng tôi có thể dễ dàng xử lý props.children
mà không cần tính đến từng loại có thể có của nó. Rất may, mọi thứ sẽ được xử lý cho chúng tôi ở chế độ nền
Tại thời điểm viết bài, props.children
1 cung cấp năm tiện ích khác nhau
Hãy xem cách chúng ta có thể sử dụngprops.children
1 với một ví dụ. Giả sử chúng ta muốn thêm lớp CSS đặc biệt img-special-class cho mỗi thành phần con của thành phần ImageSlider
. Điều này có thể được thực hiện như sau
props.children
6 cho phép chúng ta lặp lại props.children
và biến đổi từng phần tử theo hàm được truyền dưới dạng tham số thứ hai. Để đạt được mục tiêu của mình, chúng tôi đã sử dụng props.children
8. Điều này là do chúng tôi cần thay đổi giá trị của prop props.children
9, nhưng props là bất biến trong React, vì vậy chúng tôi phải sao chép từng đứa trẻ
Thêm
Nếu bạn là người mới bắt đầu học React, bạn cũng có thể quan tâm đến các bài viết sau
Triển khai và lưu trữ ứng dụng React trên máy chủ Apache
Bạn có thể chạy các ứng dụng React ngay cả trên shared hosting
mật mã. io
Top 3 thư viện React UI cho người mới bắt đầu
Ưu và nhược điểm của thư viện React UI yêu thích của tôi
lập trình tốt hơn. quán rượu
Tránh nỗi sợ tái cấu trúc với Nhập khẩu tuyệt đối trong React
Sử dụng bí danh đường dẫn tuyệt đối trong React để làm cho quá trình tái cấu trúc nhập của bạn trở nên thân thiện
jav. tiếng Anh đơn giản. io
Phần kết luận
Nắm vững props.children
là điều cần thiết để trở thành một nhà phát triển React tuyệt vời và bắt đầu khai thác hết tiềm năng của mô hình thành phần React. props.children
là một trong những tính năng hữu ích nhất của React, vì nó cho chúng ta khả năng kết xuất các thành phần con. Vì điều này, mọi nhà phát triển nên biết cách sử dụng nó đúng cách
Tôi hy vọng bài viết này sẽ giúp bạn làm chủ bố cục trong React. Hãy cho tôi biết nếu bạn có bất kỳ nhận xét hoặc đề xuất nào