[解決済み] 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のprops.childrenについて簡単に紹介します。