web-dev-qa-db-ja.com

{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>
    );
  }
}
javascriptreactjsreact-reduxfrontend
55
Nimmy

「子供」とは何ですか？

Reactのドキュメントによると、「一般的なボックス」を表すコンポーネントにはprops.childrenを使用できますが、その子については事前に知らないということです。私にとっては、それは実際には明確になっていませんでした。その定義は完全に理にかなっていますが、私には意味がありませんでした。

this.props.childrenが何をするのかという私の簡単な説明は、はコンポーネントを呼び出すときに開始タグと終了タグの間に含まれるものすべてを表示するために使用されるということです。

簡単な例：

これは、コンポーネントを作成するために使用されるステートレス関数の例です。繰り返しますが、これは関数なので、thisキーワードはありませんので、props.childrenを使用してください。

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

このコンポーネントには、いくつかのpropsを受け取っている<img>が含まれており、それから{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の簡単な紹介

91
soroush chehresa

私はあなたが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}は、それらの子をレンダリング結果に含めます。

…同じものを使う状況は？

変更を加えずに、レンダリングされた出力に子要素を直接含める場合は、これを行います。あなたがそうでなかったなら、そうではありません。

12
T.J. Crowder