1

我正在尝试 React 路由器。解释我的问题的简化示例（在帖子的底部）：

视图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 类中（而不是在单个视图中），因为标题/工具栏始终可见。如果它是视图类的一部分，则每次路由器打开不同的视图时都会重新安装标头。但是，该组件的道具可能会根据活动的路线而有所不同。就像一个不同的标题，以及一个带有可点击操作的图标，导致视图中的某些内容（状态更改）。

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

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

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

对于这种情况，还有什么其他选择？

4

1 回答 1

0

不确定这是否有帮助，但我使用<Link>from解决了类似的问题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)

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

只是一个想法。

于 2017-07-14T22:38:34.457 回答