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>

比方说，我在布局组件中初始化我的状态（这个想法是所有孩子都可以访问状态）;我如何将状态值传递给它们，还触发通过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
    }
}

如何将props传递给react-router树

1 个答案: