Question

我正在尝试使用React Router。解释我的问题的简化示例（在帖子的底部）：

视图1

var View1 = React.createClass({
  statics: {
     headerAction: function() {
        this.handleSomething();
     }
  },

  handleSomething: function() {
     this.setState(...);
  },

  render: function () {
    return (
      <div>
        (...)
      </div>
    );
  }
});

View2的类似课程

应用

var App = React.createClass({
  render: function () {
    return (
      <div>
        <AppHeader />

        <RouteHandler/>
      </div>
    );
  }
});

路由器

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="view2" handler={View2}/>
    <DefaultRoute handler={View1}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

我希望AppHeader位于App-class中（而不是在各个视图中），因为标题/工具栏始终可见。如果它是视图类的一部分，那么每次路由器打开不同视图时都会重新安装标头。但是，该组件的道具可以根据活动的路径而有所不同。就像一个不同的标题，以及一个带有可点击动作的图标，在视图中引起某些事情（状态改变）。

我试图找到一种解决这个问题的好方法，这意味着AppHeader的不同道具基于什么视图类是活动路由处理程序。由于视图类是变化的组件，我考虑在视图组件（上例中的View1 / View2）中使用它，即使不在该组件中使用props。我已经看过它在theese组件中作为静态，然后在Router.run中提取它们，问题是我无法在同一个组件中调用事件处理程序（如在View1示例中），就像标题的可点击链接一样在视图中做某事。

我试图有一个回流存储，并且在视图组件的componentWillUpdate中，在商店中调用一些操作，在app组件中监听并作为props发送到标头。但是，对于第一个渲染，在app组件的渲染过程中会调用该操作，导致第一个header不可见，因为它们尚不可用。

我想到的另一种方法是每个视图有一个Reflux存储（每个路由器处理程序），并在各个存储中为标头提供道具，并将它们传递给App组件中的标头。但后来我需要根据活动的路线在要使用的商店之间切换。除了选择使用React Router的商店之外，我还没有找到任何方法为每个处理程序设置单独的商店。

对于这样的案例还有什么其他选择？

Answer 1

不确定这是否有帮助，但我使用<Link>中的react-router解决了类似的问题。

render(){
  let to_obj={pathname:category.url, query:{text:category.text}}
  <Link to={to_obj} className="cat-link">
  .....

然后在目的地，我通过带有

的ReactiveVar更新导航栏标题

GlobalState.title.set(this.props.location.query.text)

我没有尝试过，但你甚至可以通过功能/处理程序。

只是一个想法。

反应路由器 - 从处理程序到标题的道具

1 个答案: