{This.props.children} là gì và khi nào bạn nên sử dụng nó?

Là người mới bắt đầu làm quen với thế giới React, tôi muốn hiểu sâu hơn về những gì sẽ xảy ra khi tôi sử dụng {this.props.children}và những trường hợp sử dụng tương tự. Mức độ liên quan của nó trong đoạn mã dưới đây là gì?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

'Trẻ em' là gì?

Các tài liệu về React nói rằng bạn có thể sử dụng props.childrentrên các thành phần đại diện cho 'hộp chung' và không biết trước về con của chúng. Đối với tôi, điều đó không thực sự rõ ràng. Tôi chắc chắn đối với một số người, định nghĩa đó hoàn toàn hợp lý nhưng với tôi thì không.

Lời giải thích đơn giản của tôi về những gì this.props.childrenlàm được là nó được sử dụng để hiển thị bất cứ thứ gì bạn bao gồm giữa các thẻ mở và thẻ đóng khi gọi một thành phần.

Một ví dụ đơn giản:

Đây là một ví dụ về một hàm không trạng thái được sử dụng để tạo một thành phần. Một lần nữa, vì đây là một hàm, không có thistừ khóa nên chỉ cần sử dụngprops.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

Thành phần này chứa một thành phần <img>đang nhận một số propsvà sau đó nó sẽ hiển thị {props.children}.

Bất cứ khi nào thành phần này được gọi {props.children}cũng sẽ được hiển thị và đây chỉ là một tham chiếu đến những gì nằm giữa thẻ mở và thẻ đóng của thành phần.

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Thay vì gọi thành phần bằng thẻ tự đóng <Picture />nếu bạn gọi thành phần đó sẽ có đầy đủ các thẻ đóng và mở, <Picture> </Picture>bạn có thể đặt thêm mã vào giữa nó.

Điều này loại bỏ các <Picture>thành phần khỏi nội dung của nó và làm cho nó có thể tái sử dụng nhiều hơn.

Tham khảo: Giới thiệu nhanh về các đạo cụ của React.children

Tôi giả sử bạn đang nhìn thấy điều này trong renderphương thức của một thành phần React , như thế này (chỉnh sửa: câu hỏi đã chỉnh sửa của bạn thực sự hiển thị điều đó) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

childrenlà một thuộc tính đặc biệt của các thành phần React chứa bất kỳ phần tử con nào được xác định trong thành phần, ví dụ như divsbên trong Exampleở trên. {this.props.children}bao gồm những đứa trẻ đó trong kết quả được hiển thị.

... các tình huống sử dụng giống nhau là gì

Bạn sẽ làm điều đó khi bạn muốn đưa các phần tử con vào đầu ra được hiển thị trực tiếp, không thay đổi; và không nếu bạn không.

props.children đại diện cho nội dung giữa thẻ mở và thẻ đóng khi gọi / hiển thị một thành phần:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

gọi / gọi / kết xuất Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>