javascript - React Router - 从处理程序到 header 的 Prop

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 类中(而不是位于各个 View 中)，因为标题/工具栏始终可见。如果它是 View 类的一部分，则每次路由器打开不同的 View 时都会重新安装 header 。但是，该组件的 props 可能会根据事件路径的不同而有所不同。就像不同的标题和带有可点击操作的图标，导致 View 中出现某些内容(状态更改)。

我试图找到解决这个问题的好方法，这意味着根据事件路由处理程序的 View 类为 AppHeader 提供不同的 Prop 。由于 View 类是变化的组件，因此我考虑将其放在 View 组件中(上例中的 View1/View2)，即使该组件中不会使用 props。我已经考虑过将其作为这些组件中的静态变量，然后在 Router.run 中提取它们，问题是我无法在同一组件中调用事件处理程序(如 View1 示例中)，例如标题的可点击链接在 View 中执行某些操作。

我尝试拥有一个回流存储，并在 View 组件的 componentWillUpdate 中，调用存储上的一些操作，该操作在应用程序组件中监听并作为 Prop 发送到 header 。但是，对于第一次渲染，该操作在应用程序组件的渲染过程中被调用，导致第一个 header Prop 不可见，因为它们尚不可用。

我想到的另一种方法是每个 View (每个路由器处理程序)有一个 Reflux 存储，并在各个存储中拥有 header 的 props 并将它们传递到 App 组件中的 header。但随后我需要根据事件路线在要使用的商店之间切换。除了使用 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)

我还没有尝试过，但你甚至可以传递函数/处理程序。

只是一个想法。