连接状态与儿童组件

Question

我试图绑定存储与儿童组件。 我有AppContainer.js：

// here I'm binding store value to props 
function mapStateToProps(store, props){ 
    return { 
     user: store.userInfo.loaded ? store.userInfo.userData : '%noname%' 
    } 
} 

componentDidMount(){ 
    store.dispatch(fetchUser()).then(() => 
     console.log(store.getState()) 
    ) 
} 

render(){ 
    return <Application routes={this.props.routes} user={this.props.user}/> 
} 

export default connect(mapStateToProps)(ApplicationContainer); 

在application.js中我传递PARAMS引导孩子和孩子：

render(){ 

    return <div className="component"> 
       <Header title="Home" user={this.props.user} routes={this.props.routes}/> 
       {this.props.children} // Here is Home Component 
      </div>; 
} 

并希望在Home.js获得状态值（的一个小孩）：

render() { 
     return <h5>Welcome back, {this.props.user.name}</h5> 
    } 

所以，问题是： 什么是推动这些值存储到子组件的正确方法？

Answer 1

你可以使用React.children和cloneElement为了实现这一目标：

return (
    <div className="component"> 
    <Header title="Home" user={this.props.user} routes={this.props.routes}/> 
    {React.Children.map(this.props.children, child => 
     React.cloneElement(child, { 
     ...this.props 
     }) 
    )} 
    </div>; 
);