ReactJS: Tìm hiểu React.Childen

React phân phối 1 API là React.Youngsters. API này tương trợ những tiện ích để tương tác sở hữu những cấu trúc dữ liệu chưa xác định (opaque information construction). React.Youngsters được xem như 1 props của part, dùng cú pháp là this.props.kids hoặc props.kids để đại diện cho bất cứ thành phần con nào được truyền vào.

Youngsters trong React.Childen có thể là đối tượng nào?

Youngsters có thể là bất cứ đối tượng nào: React aspect, part, string, quantity, object, operate…

Thông tin chi tiết React.Youngsters

Little one aspect

Mọi thẻ JSX, hoặc những đoạn textual content bình thường đều là có thể là 1 “kids”.

Thí dụ:

const Image = (props) => { return ( <div> <img src={props.src}/> {props.kids} </div> ) }

Part Image chứa aspect <img /> và nhận vào đối tượng props. Như ta thấy props có src và kids được gọi để dùng.

operate App() { return ( <Image src=”https://wiki.tino.org/wp-content/uploads/2021/09/obtain.png”> {/* Nhưng gì được đặt trong này đều là props.kids */} <p>It is a cute picture</p> </Image> ); }

Thay vì ta dùng thẻ đóng <Image src=”/image-1.jpg” />, thì ta sẽ ko có giá trị kids của props.

Little one Part

Chúng ta có thể lồng những part vào sở hữu như tương tự như những thẻ HTML, đấy cũng là lý do vì sau cú pháp JSX giống sở hữu HTML.

Những part hay nội dung được lồng bên trong part đều là kids.

Xem Thêm  Phân tách On-chain Aave Protocol (AAVE) - Định giá hiện tại có quá cao?

const Avatar = () => { return <img src=”/avatar.jpg” alt=”” />; }; const CommentList = (props) => { return <div>{props.kids}</div>; }; const Content material = () => { return ( <> <p>Wiki Tino</p> <p>5.0 Based mostly on 195 opinions</p> </> ); }; operate App() { return ( <div className=”commentBox”> <h1>Feedback</h1> <div className=”commentBox”> <CommentList> <Avatar /> <Content material /> </CommentList> </div> </div> ); }

Như ta thấy, cặp thẻ part <CommentList><CommentList/> có chứa 2 part con bên trong. Cả 2 part này đều là 1 props.kids.

Ko những thế, những thuộc tính, occasion của kids đều được hoạt động phải chăng lúc truyền qua props. Thí dụ:

operate CardStyle(props) { return <div fashion={{ backgroundColor: props.shade }}>{props.kids}</div>; } operate Card(props) { return ( <CardStyle shade=”#d0d0d0″> <h1>{props.title}</h1> <p>{props.message}</p> {props.kids} </CardStyle> ); } class SignUpCard extends React.Part { constructor(props) { tremendous(props); this.handleChange = this.handleChange.bind(this); this.handleSignUp = this.handleSignUp.bind(this); this.state = { e mail: “” }; } render() { return ( <Card title=”Nhận thông tin bài viết mới” message=”Nhập e mail để có thể nhận thông tin về bài viết mới: ” > <enter worth={this.state.e mail} onChange={this.handleChange} /> <button onClick={this.handleSignUp}>Đăng ký !</button> </Card> ); } handleChange(e) { this.setState({ e mail: e.goal.worth }); } handleSignUp() { alert(`Chúc mừng ${this.state.e mail} đã đăng ký nhận bài viết mới !`); } } ReactDOM.render(<SignUpCard />, doc.getElementById(“root”));

Phân tách dí dụ trên, bên trong cặp thẻ part <Card></Card> có 2 React aspect là <enter /> và <button> – đấy chính là kids. Và aspect enter có sự kiện onChange để bắt dữ liệu nhập vào, aspect button có sự kiện onClick để alert ra thông tin đã nhập vào từ enter, những sự kiện và thuộc tính của những aspect này được gọi bằng props.kids được hoạt động siêu bình thường, ko gây ra lỗi và giảm hiệu suất.

Xem Thêm  Fibonacci - Điều kỳ diệu và bí hiểm trong buying and selling

Tiếp theo là part <CardStyle></CardStyle>. Part nhận aspect <h1> và <p>, và cả props.kids của part <Card> được truyền từ part <SignUpCard>. Bật F12 của trình thông qua lên, ta sẽ thấy những kids khác được render bên trong thẻ div của part <CardStyle>. Vì thế, chúng ta có thể dùng kids lồng bao nhiêu part đều được.

Youngsters sở hữu vòng lặp

React phân phối 2 phương thức thường dùng là React.Youngsters.map và React.Youngsters.forEach. Bí quyết dùng tương tự sở hữu map() và forEach() đối sở hữu array.

Thí dụ:

operate App() { return ( <CommentList> <h1>First remark</h1> <h2>Second remark</h2> </CommentList> ); } ReactDOM.render(<App />, doc.getElementById(“root”));

Ta thấy, part <CommentList> có kids là 2 aspect <h1> và <h2>, kids ở đây là 1 array chứa 2 đối tượng react aspect, lúc log ra ta có thể thấy giá trị của kids như sau:

Để render những aspect cần thiết thì ta dùng React.Youngsters.map để thông qua mảng và trả về những aspect đúng sở hữu điều kiện. Thí dụ, chỉ render những aspect nào là thẻ h1:

operate CommentList(props) { return ( <div> {React.Youngsters.map(props.kids, (youngster) => { if (youngster.kind === “h1”) return youngster; })} </div> ); }

hoặc:

operate CommentList(props) { return ( <div> {props.kids.map((youngster) => { if (youngster.kind === “h1”) return youngster; return null; })} </div> ); }

React.Youngsters.forEach cũng tương tự React.Youngsters.map, nhưng nó ko trả về 1 giá trị nào cả.

React.Youngsters.rely

Như đã nói ở trên, kids có thể là bất cứ giá trị gì, nên việc đếm số lượng kids cũng sẽ bị nhầm lẫn.

Thí dụ:

operate App() { return ( <CommentList> <h1>1st remark</h1> <h2>2nd remark</h2> <h1>third remark</h1> <h2>4rd remark</h2> {() => console.log(“testing”)} </CommentList> ); }

Xem Thêm  Optimism (OP) là gì? Tìm hiểu chi tiết về dự án và phương pháp sở hữu OP coin

Ví dụ ta dùng {props.kids.size} thì kết quả sẽ trả về là 5, vì kids thực tế là 1 array chứa bất kìa những phần tử nào. Nhưng lúc ta dùng React.Youngsters.rely(props.kids) thì kết quả sẽ trả về là 4, vì hàm này chỉ tới những phần tử nào là React Component.

Vì vậy, tùy vào đề nghị như thế nào mà ta lựa chọn phương pháp dùng cho yêu thích.

React.Youngsters.solely

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

operate CommentList(props) { return <div>{React.Youngsters.solely(props.kids)}</div>; } CommentList.propTypes = { kids: PropTypes.func.isRequired }

Ví dụ part <CommentList> có kids nhận vào hơn 1 đối tượng:

operate App() { return ( <CommentList> <h1>1st remark</h1> <h1>third remark</h1> </CommentList> ); }

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

React.Youngsters.toArray

Phương thức này giới hạn để tạo mới 1 mảng kids sở hữu những key gắn vào những aspect con. Nó hữu ích lúc muốn sắp xếp, cắt hoặc xử lý những props.kids:

class CommentList extends React.Part { render() { const kids = React.Youngsters.toArray(this.props.kids); return <p>{kids.kind()}</p>; } }

Hy vọng kiến thứ phía trên sẽ giúp khách hàng hiểu rõ hơn về React.Youngsters. Cám ơn khách hàng đã ghé thăm bài viết.

Bài viết có tham khảo thông tin từ hyperlink: 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 Heart, 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: 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 chi phí: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org