Mẹo Hướng dẫn ReactJS: Tìm hiểu React.Childen 2022

READ ALSO

Testnet là gì? Cách làm Testnet những dự án công trình bất Động sản

#### trong Excel là lỗi gì? Cách sửa lỗi #### nhanh gọn và đơn thuần và giản dị nhất

React phục vụ một API là React.Children. API này tương hỗ những tiện ích để tương tác với những cấu trúc tài liệu chưa xác lập (opaque data structure). React.Children được xem như một props của component, sử dụng cú pháp là this.props.children hoặc props.children để đại diện thay mặt thay mặt cho bất kể thành phần con nào được truyền vào.

NỘI DUNGChildren trong React.Childen trọn vẹn có thể là đối tượng người dùng nào?READ ALSOThông tin rõ ràng React.ChildrenChild elementChild ComponentChildren với vòng lặpReact.Children.countReact.Children.onlyReact.Children.toArrayChildren trong React.Childen trọn vẹn có thể là đối tượng người dùng nào?

Children trọn vẹn có thể là bất kể đối tượng người dùng nào: React element, component, string, number, object, function…

tin tức rõ ràng React.Children

Child element

Mọi thẻ JSX, hoặc những đoạn text thường thì đều là trọn vẹn có thể là một “children”.

Ví dụ:

const Picture = (props) =>
return (

props.children

)

Component Picture chứa element và nhận vào đối tượng người dùng props. Như ta thấy props có src và children được gọi để sử dụng.

function App()
return (

/* Nhưng gì được đặt trong này đều là props.children */

This is a cute image

);

Thay vì ta sử dụng thẻ đóng , thì ta sẽ không còn còn mức giá trị children của props.

Kết quả hiển thị props.children trên trình duyệt

Child Component

Chúng ta trọn vẹn có thể lồng những component vào với như tương tự như những thẻ HTML, này cũng là nguyên do vì sau cú pháp JSX giống với HTML.

Các component hay nội dung được lồng bên trong component đều là children.

const Avatar = () =>
return ;
;

const CommentList = (props) =>
return

;
;

const Content = () =>
return (

Wiki

5.0 Based on 195 reviews

);
;

function App()
return (

);

Kết quả hiển thị props.children trên trình duyệt

Như ta thấy, cặp thẻ component có chứa 2 component con bên trong. Cả hai component này đều là một props.children.

Không những thế, những thuộc tính, sự kiện của children đều được hoạt động và sinh hoạt giải trí tốt khi truyền qua props. Ví dụ:

function CardStyle(props)
return

;

function Card(props)
return (

props.title

props.message

props.children

);

class SignUpCard extends React.Component
constructor(props)
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = email: “” ;

render()
return (

Đăng ký !

);

handleChange(e)
this.setState( email: e.target.value );

handleSignUp()
alert(`Chúc mừng $this.state.email đã Đk nhận nội dung bài viết mới !`);

ReactDOM.render(, document.getElementById(“root”));

Kết quả hiển thị cá prop.child lồng nhau

Phân tích ví dụ trên, bên trong cặp thẻ component có 2 React element là và – đó đó đó là children. Và element input có sự kiện onChange để bắt tài liệu nhập vào, element button có sự kiện onClick để alert ra thông tin đã nhập vào từ input, những sự kiện và thuộc tính của những element này được gọi là props.children được hoạt động và sinh hoạt giải trí rất thường thì, không khiến ra lỗi và giảm hiệu suất.

Kết quả hiển thị sau khoản thời hạn nhấn nút “Đăng ký !”

Tiếp theo là component . Component nhận element

và

, và cả props.children của component được truyền từ component . Bật F12 của trình duyệt lên, ta sẽ thấy những children khác được render bên trong thẻ div của component . Vì thế, toàn bộ chúng ta trọn vẹn có thể sử dụng children lồng bao nhiêu component đều được.

Children với vòng lặp

React phục vụ hai phương thức thường dùng là React.Children.map và React.Children.forEach. Cách sử dụng tương tự với map() và forEach() riêng với array.

Ví dụ:

function App()
return (

First comment

Second comment

);

ReactDOM.render(, document.getElementById(“root”));

Ta thấy, component có children là 2 element

và

, children ở đấy là một array chứa hai đối tượng người dùng react element, khi log ra ta trọn vẹn có thể thấy giá trị của children như sau:

Kết quả khi log prop.children

Để render những element thiết yếu thì ta sử dụng React.Children.map để duyệt mảng và trả về những element đúng với Đk. Ví dụ, chỉ render những element nào là thẻ h1:

function CommentList(props)
return (

);

hoặc:

function CommentList(props)
return (

);

React.Children.forEach cũng tương tự React.Children.map, nhưng nó không trả về một giá trị nào cả.

React.Children.count

Như đã nói ở trên, children trọn vẹn có thể là bất kể giá trị gì, nên việc đếm số lượng children cũng tiếp tục bị nhầm lẫn.

Ví dụ:

function App()
return (

1st comment

2nd comment

3rd comment

4rd comment

() => console.log(“testing”)

);

Nếu ta sử dụng props.children.length thì kết quả sẽ trả về là 5, vì children thực tiễn là một array chứa bất kìa những thành phần nào. Nhưng khi ta sử dụng React.Children.count(props.children) thì kết quả sẽ trả về là 4, vì hàm này chỉ đến những thành phần nào là React Element.

Vì vậy, tùy vào yêu cầu ra làm sao mà ta lựa lựa chọn cách sử dụng cho thích hợp.

React.Children.only

Phương thức này bắt buộc một component chỉ có duy nhất một childrent, ví dụ:

function CommentList(props)
return

;

CommentList.propTypes =
children: PropTypes.func.isRequired

Nếu component có children nhận vào hơn 1 đối tượng người dùng:

function App()
return (

1st comment

3rd comment

);

thì React sẽ ném ra lỗi như sau:

Lỗi khi child có hơn 1 element

React.Children.toArray

Phương thức này dừng để tạo mới một mảng children với những key gắn vào những element con. Nó hữu ích khi muốn sắp xếp, cắt hoặc xử lý những props.children:

class CommentList extends React.Component
render()
const children = React.Children.toArray(this.props.children);
return

children.sort()

;

Kết quả khi sử dụng toArray()

Hy vọng kiến thứ phía trên sẽ hỗ trợ những bạn làm rõ hơn về React.Children. Cám ơn những bạn đã ghé thăm nội dung bài viết.

Bài viết có tìm hiểu thêm thông tin từ link: https://reactjs.org/docs/react-api.html#reactchildren

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện thay mặt thay mặt: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí MinhĐiện thoại: 0364 333 333Tổng đài miễn phí: 1800 6734Email: sales@.orgWebsite: www..org

Tags: Kiến thức Reactjs

đoạn Clip ReactJS: Tìm hiểu React.Childen mới nhất?

Bann đang tìm kiếm từ khóa ReactJS: Tìm hiểu React.Childen 2022-10-29 21:16:10 san sẻ Bí quyết về trong nội dung bài viết một cách 2022.
#ReactJS #Tìm #hiểu #ReactChilden ReactJS: Tìm hiểu React.Childen
===> Nếu bạn có thắc mắc hay yếu tố gì nội dung bài viết trọn vẹn có thể để lại phản hồi cuối bài nghen.