Apa itu {this.props.children} dan kapan Anda harus menggunakannya?

Sebagai pemula di dunia React, saya ingin memahami secara mendalam apa yang terjadi saat saya menggunakan {this.props.children}dan situasi apa yang menggunakan hal yang sama. Apa relevansinya dengan potongan kode di bawah ini?

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

Apa yang dimaksud dengan 'anak-anak'?

Dokumen React mengatakan bahwa Anda dapat menggunakan props.childrenkomponen yang mewakili 'kotak umum' dan yang tidak mengenal anak-anaknya sebelumnya. Bagi saya, itu tidak menjelaskan semuanya. Saya yakin bagi sebagian orang, definisi itu masuk akal tetapi tidak bagi saya.

Penjelasan sederhana saya tentang apa yang this.props.childrendilakukannya adalah itu digunakan untuk menampilkan apa pun yang Anda sertakan di antara tag pembuka dan penutup saat menjalankan sebuah komponen.

Contoh sederhana:

Berikut adalah contoh fungsi stateless yang digunakan untuk membuat komponen. Sekali lagi, karena ini adalah fungsi, tidak ada thiskata kunci jadi gunakan sajaprops.children

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

Komponen ini berisi <img>yang menerima beberapa propsdan kemudian ditampilkan {props.children}.

Kapan pun komponen ini dipanggil {props.children}juga akan ditampilkan dan ini hanya referensi ke apa yang ada di antara tag pembuka dan penutup komponen.

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

Alih-alih memanggil komponen dengan tag penutup sendiri, <Picture />jika Anda memanggilnya, Anda akan <Picture> </Picture>dapat menempatkan lebih banyak kode di antara komponen tersebut dengan tag pembuka dan penutup penuh .

Ini memisahkan <Picture>komponen dari kontennya dan membuatnya lebih dapat digunakan kembali.

Referensi: Pengenalan singkat ke props.children React

Saya berasumsi Anda melihat ini dalam rendermetode komponen React , seperti ini (edit: pertanyaan yang Anda edit memang menunjukkan itu) :

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>

childrenadalah properti khusus dari komponen React yang berisi semua elemen anak yang didefinisikan di dalam komponen, misalnya bagian divsdalam di Exampleatas. {this.props.children}menyertakan anak-anak itu dalam hasil yang diberikan.

... apa situasi untuk menggunakan hal yang sama

Anda akan melakukannya saat ingin menyertakan elemen anak dalam keluaran yang dirender secara langsung, tidak berubah; dan tidak jika tidak.

props.children mewakili konten antara tag pembuka dan penutup saat menjalankan / merender komponen:

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

panggil / panggil / render Foo:

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