{this.props.children}とは何ですか、いつ使用すべきですか?


118

Reactの世界の初心者なので、使用する{this.props.children}とどうなるか、また使用する状況はどうなるのかを深く理解したいと思います。以下のコードスニペットでそれの関連性は何ですか?

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


1
与えられたリンクでは、コンポーネント内で{this.props.children}を使用するとどうなるかは明確ではありませんでした。
ニミー

回答:


174

「子供」とは何ですか?

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の簡単な紹介


子ノードの再利用性が問題にならない場合、子コンポーネントから{props.children}を呼び出す場合、子コンポーネント内で使用する場合と比べてパフォーマンスに違いはありますか?
Nimmy

1
@Nimmy {props.children}を使用する場合、パフォーマンスの問題はありません。コンポーネントを小道具として渡すだけです。私たちは、子コンポーネント内の子供を使用することができたときに使用する必要はありません{props.children}
Soroush Chehresa


1
@AlpitAnand回答の最後に参照があります:|
Soroush Chehresa

1
どうもありがとう。とてもうまく説明されました。
Alok Ranjan

24

これは、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特別なプロパティはコンポーネント内に定義されたすべての子要素を含む構成要素、例えば、反応させているdivs内部Example上記。{this.props.children}レンダリングされた結果にそれらの子を含めます。

...同じものを使用する状況は何ですか

レンダリングされた出力に子要素を変更せずに直接含める場合に行います。しなかった場合もそうです。


子ノードの再利用性が問題にならない場合、子コンポーネントから{props.children}を呼び出す場合、子コンポーネント内で使用する場合と比べてパフォーマンスに違いはありますか?
Nimmy

@Nimmy:すみません、「子コンポーネント内で使用するよりも」という意味がわかりません。
TJクラウダー2018

「それぞれの子コンポーネントにノードを直接書き込むのではなく、子コンポーネントで{this.props.children}を呼び出す」ことを意味しました。
Nimmy 2018

2
@Nimmy私はあなたが{this.props.children}を代わりに書くべきだと思っていると思っていると思います。その場合はそれを行ってください。パフォーマンスに若干の利点があります。ただし、コンポーネントは静的なので、コードベースの別の場所にある別の子のセットで再利用することはできません。
Subin Sebastian

2
@ssk:ああ!良いですね。ニミー-はい、あなたはあなたの子供をあなたの中renderで直接書くことができますが、彼らはそれがすべての場合において同じ子供であるでしょう。子要素(適切な場合)を受け入れることにより、コンポーネントの各インスタンスは異なるコンテンツを持つことができます。答えの例を更新しました。
TJクラウダー2018

0

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>

小道具とprops.children

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.