{this.props.children} คืออะไรและควรใช้เมื่อใด

ในฐานะผู้เริ่มต้นสู่โลกแห่ง React ฉันต้องการทำความเข้าใจในเชิงลึกว่าเกิดอะไรขึ้นเมื่อฉันใช้{this.props.children}และสถานการณ์ที่จะใช้เหมือนกันคืออะไร ความเกี่ยวข้องของมันในข้อมูลโค้ดด้านล่างคืออะไร?

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

'เด็ก' คืออะไร?

เอกสาร React กล่าวว่าคุณสามารถใช้props.childrenกับส่วนประกอบที่แสดงถึง 'กล่องทั่วไป' และไม่รู้จักลูก ๆ ล่วงหน้า สำหรับฉันนั่นไม่ได้ทำให้ทุกอย่างชัดเจนขึ้น ฉันแน่ใจสำหรับบางคนคำจำกัดความนั้นสมเหตุสมผล แต่มันไม่เหมาะกับฉัน

คำอธิบายง่ายๆของฉันเกี่ยวกับสิ่งที่this.props.childrenทำคือใช้เพื่อแสดงสิ่งที่คุณรวมระหว่างแท็กเปิดและปิดเมื่อเรียกใช้ส่วนประกอบ

ตัวอย่างง่ายๆ:

นี่คือตัวอย่างของฟังก์ชันไร้สถานะที่ใช้ในการสร้างส่วนประกอบ อีกครั้งเนื่องจากนี่เป็นฟังก์ชั่นจึงไม่มีthisคำหลักเพียงแค่ใช้props.children

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

คอมโพเนนต์นี้ประกอบด้วย<img>ที่ได้รับบางส่วนpropsและกำลังแสดง{props.children}อยู่

เมื่อใดก็ตามที่มีการเรียกใช้ส่วนประกอบนี้{props.children}จะแสดงขึ้นด้วยและนี่เป็นเพียงการอ้างอิงถึงสิ่งที่อยู่ระหว่างแท็กเปิดและปิดของส่วนประกอบ

//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>
  )
}

แทนที่จะเรียกใช้องค์ประกอบด้วยแท็กปิดตัวเอง<Picture />หากคุณเรียกใช้แท็กเปิดและปิดแบบเต็ม<Picture> </Picture>คุณสามารถวางโค้ดเพิ่มเติมระหว่างแท็กได้

สิ่งนี้ยกเลิกการจับคู่<Picture>องค์ประกอบจากเนื้อหาและทำให้สามารถนำกลับมาใช้ใหม่ได้มากขึ้น

ข้อมูลอ้างอิง: บทนำสั้น ๆ เกี่ยวกับอุปกรณ์ประกอบฉากของ React เด็ก ๆ

ฉันคิดว่าคุณเห็นสิ่งนี้ในวิธีการตอบสนองขององค์ประกอบrenderเช่นนี้(แก้ไข: คำถามที่คุณแก้ไขแสดงให้เห็นอย่างนั้น) :

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>

childrenเป็นคุณสมบัติพิเศษของส่วนประกอบ React ซึ่งมีองค์ประกอบลูกใด ๆ ที่กำหนดไว้ภายในองค์ประกอบเช่นdivsด้านในExampleด้านบน {this.props.children}รวมเด็กเหล่านั้นไว้ในผลลัพธ์ที่แสดง

... สถานการณ์จะใช้อะไรเหมือนกัน

คุณจะทำเมื่อคุณต้องการรวมองค์ประกอบลูกในผลลัพธ์ที่แสดงผลโดยตรงโดยไม่เปลี่ยนแปลง และไม่ใช่ถ้าคุณไม่ทำ

props.children แสดงเนื้อหาระหว่างแท็กเปิดและแท็กปิดเมื่อเรียก / แสดงผลคอมโพเนนต์:

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>;

เรียก / โทร / แสดงผลFoo:

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