如何将道具传递给反应路由器树中的子组件

Question

我有一个由 react-router 组成的路由模型。我想知道如何在此设置中的组件之间传递道具 - 有可能吗？

   <Route path='/' component={Layout}>
      <IndexRoute component={Home} />
      <Route path='/users' component={Users} />
      <Route path='/posts' component={Posts} />
      <Route path='/albums' component={Albums} />
      <Route path='/about' component={About} />
   </Route>

例如，我在 Layout 组件中初始化了我的状态（想法是它的所有子项都可以访问该状态）；我如何将 state 值传递给它们，并在通过 props 传递的父组件中触发函数？

这可能吗，如果组件直接嵌套在它的父级中，还是我在路由方面以错误的方式考虑这个？如果有，是否有替代解决方案？

任何帮助表示赞赏

Answer 1

是的，这是可能的。您可以在Layout 组件中使用context。这是 ES6 中的一个示例：

export default class Layout extends React.Component {

    static childContextTypes = {
        layoutState: React.PropTypes.object
    }

    getChildContext() {
        return {layoutState: this.state};
    }

}

然后只需在子/孙组件中声明上下文：

export default class Users extends React.Component {

    static contextTypes = {
        layoutState: React.PropTypes.object
    }

    render() {
        const {layoutState} = this.context;
        // then just use your layoutState and return
    }
}