ReactJS: Tìm hiểu React.Childen

React phân phối 1 API là React.Kids. 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 knowledge construction). React.Kids được xem như 1 props của element, 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.

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

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

Thông tin chi tiết React.Kids

Little one factor

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

Dí dụ:

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

Part Image chứa factor <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 thế 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 element vào sở hữu như tương tự động như những thẻ HTML, đấy cũng là nguyên nhân vì sau cú pháp JSX giống sở hữu HTML.

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

Xem Thêm  Bí quyết sửa lỗi bàn phím máy tính ko gõ được 1 số phím

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ẻ element <CommentList><CommentList/> có chứa 2 element con bên trong. Cả 2 element 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. Dí dụ:

operate CardStyle(props) { return <div model={{ 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 = { electronic mail: “” }; } render() { return ( <Card title=”Nhận thông tin bài viết new” message=”Nhập electronic mail để có thể nhận thông tin về bài viết new: ” > <enter worth={this.state.electronic mail} onChange={this.handleChange} /> <button onClick={this.handleSignUp}>Đăng ký !</button> </Card> ); } handleChange(e) { this.setState({ electronic mail: e.goal.worth }); } handleSignUp() { alert(`Chúc mừng ${this.state.electronic mail} đã đăng ký nhận bài viết new !`); } } ReactDOM.render(<SignUpCard />, doc.getElementById(“root”));

Phân tách dí dụ trên, bên trong cặp thẻ element <Card></Card> có 2 React factor là <enter /> và <button> – đấy chính là kids. Và factor enter có sự kiện onChange để bắt dữ liệu nhập vào, factor 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 factor 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  Bí quyết livestream trên Fb bằng OBS đơn giản 2023

Tiếp theo là element <CardStyle></CardStyle>. Part nhận factor <h1> và <p>, và cả props.kids của element <Card> được truyền từ element <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 element <CardStyle>. Vì thế, chúng ta có thể dùng kids lồng bao nhiêu element đều được.

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

React phân phối 2 phương thức thường dùng là React.Kids.map và React.Kids.forEach. Phương pháp dùng tương tự động sở hữu map() và forEach() đối sở hữu array.

Dí dụ:

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

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

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

operate CommentList(props) { return ( <div> {React.Kids.map(props.kids, (little one) => { if (little one.sort === “h1”) return little one; })} </div> ); }

hoặc:

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

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

React.Kids.depend

Như đã nói tạ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.

Xem Thêm  TCP/IP là gì? Tìm hiểu về cấu trúc của TCP/IP

Dí 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> ); }

Trường hợp 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.Kids.depend(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 Ingredient.

Vì vậy, tùy thuộc} vào đề nghị như thế nào mà ta lựa chọn bí quyết dùng cho ưu thích.

React.Kids.solely

Phương thức này cần} 1 element chỉ có duy nhất 1 childrent, dí dụ:

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

Trường hợp element <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.Kids.toArray

Phương thức này ngừng để tạo new 1 mảng kids sở hữu những key gắn vào những factor 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.Kids.toArray(this.props.kids); return <p>{kids.type()}</p>; } }

Hy vọng kiến thứ phía trên sẽ giúp người tiêu dùng hiểu rõ hơn về React.Kids. Cám ơn người tiêu dù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 Middle, 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 phí tổn: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org