子供の小道具は、子コンポーネントで

Question

親コンポーネントに表示されていない、私は次のように小道具を設定します。

function mapStateToProps(state) { 
    return { 
    user : state.App.get('user'), 
    foo: 'ok' 
    } 
} 

をしかし、私は親コンポーネントのrender方法でthis.props.childrenを読んだとき、fooはありません。なぜ誰も知っていますか？

私は自分のプロジェクトで親から子の状態を見ることができないことに気付きました。何か不足していますか？

私はこのアプリケーションでReduxも使用しています。どうしましたか？親コンポーネントにthis.props.children.fooのような何かをする正しい方法は何ですか？

Answer 1

this.props.children.fooを参照してfooを取得しないでください。コンポーネントをmapStateToPropsに接続したら、this.props.foo

this.props.childrenから、Reactコンポーネントの開閉タグに囲まれたすべての要素を取得することができます。

CodePenの例はこれを示しリアクトドキュメントのページにあります： http://codepen.io/gaearon/pen/ozqNOV?editors=0010

function WelcomeDialog() { 
    return (
     <FancyBorder color="blue"> 
      /*everything between these two blocks*/ 
      <h1 className="Dialog-title"> 
       Welcome 
      </h1> 
      <p className="Dialog-message"> 
       Thank you for visiting our spacecraft! 
      </p> 
      /*is what is sent to FancyBorder as this.props.children*/ 
     </FancyBorder> 
    ); 
} 

が出典：https://facebook.github.io/react/docs/composition-vs-inheritance.html