Trẻ em có nghĩa là gì trong Javascript?

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

Trong 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
ProfileImage3, ProfileImage4, 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 , ProfileImage5, ProfileImage4, ProfileImage3 và ProfileImage8 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 ProfileImage5, ProfileImage8, ProfileImage4 hoặc ProfileImage3, trước tiên bạn phải

Tại sao ProfileDetails3 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ẻ

“ProfileDetails6 cung cấp các tiện ích để xử lý cấu trúc dữ liệu mờ đục của props.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.children0 tương ứng. Nhờ có API props.children1, 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.children1 cung cấp năm tiện ích khác nhau

Hãy xem cách chúng ta có thể sử dụngprops.children1 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.children6 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.children8. Điều này là do chúng tôi cần thay đổi giá trị của prop props.children9, 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

Trẻ em trong JS là gì?

Trẻ em có ý nghĩa gì trong mã hóa?

Làm cách nào để có con trong JavaScript?

Trẻ em có nghĩa là gì trong HTML?