Question

我有一个父组件，它从componentWillMount方法的后端加载一些数据。这来自单个配置端点，只应调用一次。我想做的是将数据加载到他的父组件中，然后用这种状态包装许多子组件。为了对此进行上下文化，父组件是用于仪表板的导航栏和页脚，子项将是该仪表板内的视图，即仪表板页面内容。 React-Router的文档解释了{this.props.children}是处理此问题的首选方法，但似乎并未解释如何将状态传递给子级。我该怎么做呢？

也值得说明我的路线：

<Router history={browserHistory}>
    <Route path='/' onEnter={redirectWww} />
    <Route
        path='/dashboard'
        component={DashboardContainerWrapper}
        onEnter={requireAuth}>
        <Route path='/dashboard/' component={DashboardIndex}/>
        <Route path='/dashboard/some/view' component={DashboardSomeView}/>
    </Route>
 </Router>

Answer 1

实际上今天只需要做类似的事情。我做的是我使用React.cloneElement将父组件状态注入子组件。在你的渲染方法

{React.Children.map(this.props.children, (child) =>
  React.cloneElement(child, {...this.state})
)}

Answer 2

我可以将状态和功能从父级传递给子级，就像：

<Router history={browserHistory}>
    <Route path='/' onEnter={redirectWww} />
    <Route
        path='/dashboard'
        component={() => (
        <DashboardContainerWrapper browserHistory={browserHistory} /> )}
        onEnter={requireAuth} />
        <Route path='/dashboard/' component={DashboardIndex}/>
        <Route path='/dashboard/some/view' component={DashboardSomeView}/>
    </Route>
 </Router>

如何通过react-router将状态从父（包装器组件）传递给其子节点？

2 个答案: