親コンポーネントの子プロップをReduxで読む

Question

私はParentというコンポーネントを取得し、別のコンポーネントをChildに注入します。

子は、次のように定義された小道具を有する：

function mapStateToProps(state) { 
    return { 
    foo : 'some-value' 
    } 
} 

私はそのような親成分でfooにアクセスしたい：アフター

class Parent extends Component { 
render(){ 
    //something like this 
    <div className={this.props.children.foo}> 
     {this.props.children} 
    </div> 
} 

@edit

これを使用してReact.Children.toArray私は配列として子を取得し、forEach -itを取得しました。

しかし、小道具はchild.propsで利用できません。

何かがありません。誰でもアイデアはありますか？

Answer 1

this.props.childrenは、あなたがそれにループ

render() { 
    this.props.children.forEach((component) => { 
    console.log(component.props.foo); 
    }) 

    return ...; 
} 

は、あなたの子供たちは、単一ノードまたは複数のノードすることができthis

Answer 2

を見てみましょうする必要があり、複数の構成要素とすることができたよう。単一ノードの場合は、propsに直接アクセスしてください。そうでない場合は、mapを使用して子ノードを反復処理し、porpsを返します。

希望すると便利です。

render() { 
    const childProps = ! this.props.children instanceof Array 
    ? this.props.children.props.foo //returns foo if child is a single node 
    : this.props.children.map(child => child.props.foo) // returns array of foo if children is a multiple nodes. 

    console.log(childProps) 

    return ...; 
}