2016-07-27 1 views
14

私が書いたコンポーネントはどれも{this.props.children}ではないことに気付きました。ReactJS:なぜthis.props.childrenを使用しますか?

私は、公式の文書がhttps://facebook.github.io/react/docs/multiple-components.htmlの先頭にあるようにコンポーネントを構成する傾向があります。

は、有益な、これはそれがだと仮定

A.js

render() { 
    <B /> 
    <C /> 
} 

を?:ようにそれらを構成する上で...このような部品...

<A> 
    <B /> 
    <C /> 
</A> 

をネストされています正しい用語、私は何が欠けていますか?

+0

あなたはいけない場合、子供が何であるかを知っていますか?どのようなスタイルやアクションを子供に適用するラッパーコンポーネントについて考えることができます。さらに、1つのコンポーネントが少なく、アプリケーションについては、リアクションを使用してサイトを構築するときには、それを使うつもりだ – JordanHendrix

答えて

19

アプリケーション私はたいてい、レンダリングしたい子どもたちをよく知っているので、ほとんどこのthis.props.childrenを使用しません。ライブラリや特定のアプリケーションの外部で再利用するように書かれたコンポーネントでは、頻繁に見てきました。私はthis.props.childrenがそのユースケースに関連性があると思います。

+0

良い点、これは私の思考を落ち着かせる最も有益な答えでした。 – MattDuFeu

9

レンダリングしたいものがわからないときには便利だと思います。

たとえば、あなたがツールチップラッパーを持っている、のは、それはあなたのシナリオでAコンポーネントだ、とあなたは別のコンテンツを渡すためにそれを使用することができましょう:

<A> 
    <div>Some text...</div> 
    <ImageComponent /> // render an image as well 
</A> 

または:私は

<A> 
    <div>Only text</div> 
</A> 
2

一部のコンポーネントは、事前に子供を知らないコンポーネントがあります。これは、一般的な「ボックス」を表すサイドバーやダイアログなどのコンポーネントで特に一般的です。

私たちは、このような構成要素は、特別な子供たちが直接その出力に子要素を渡すために小道具を使用することをお勧めします: Read More...

関連する問題