javascript - React Router 和 RxJS 数据流

Question

我有一个 React 应用程序，其数据流由 RxJS 驱动 -> here

我使用 RxJS 订阅了我的数据存储，并将其作为 prop 通过应用传递:

Model.subject.subscribe((appState) => {
  React.render(
   <App {...appState}/>,
   document.getElementById('app')
 );
});

下面是 react-router 通常如何 self 渲染:

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

这是我目前所拥有的，它可以很好地渲染 react-router 但数据 appState不通过 <handler />但它在 React.render 之前注销正常

Router.run(routes, function (Handler) {
  Model.subject.subscribe((appState) => {
    console.log(appState); // the state passes here
    React.render(
      <Handler {...appState}/>, // the state doesn't pass here
      document.getElementById('app')
    );
  });
});

现在有没有办法可以合并 RxJS 数据订阅并通过 React-Router 将其放入？

解决方案

这里是完整的解决方案，关注<Handler {...appState}/>这会将数据传递到应用程序中，但您随后需要通过 Prop <RouteHandler {...this.props} /> 传递该数据

var App = React.createClass({
  render: function () {
    return (
      <div>
        <header>
          <ul>
            <li><Link to="app">Home</Link></li>
            <li><Link to="about">About</Link></li>
            <li><Link to="login">Login</Link></li>
          </ul>
        </header>
        <RouteHandler {...this.props} />
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="about" handler={About}/>
    <Route name="login" handler={Login}/>
    <DefaultRoute handler={Home}/>
  </Route>
);



Router.run(routes, function (Handler) {
  Model.subject.subscribe((appState) => {
    React.render(
      <Handler {...appState}/>,
      document.getElementById('app')
    );
  });
});

Answer 1

您确定您的处理人员期望以您在 Handler 中传播它们的方式提供 Prop 吗？组件？

无论哪种方式，您实现它的方式只会在首先更改路由然后更改可观察对象的情况下呈现任何内容。如果有路线变化但没有后续可观察到的变化，则不会呈现任何内容。

您希望在路由发生变化时以及可观察对象发生变化时都进行渲染。尝试这样的事情:

var CurrentHandler = null;
var currentAppState = {};

Router.run(routes, function (Handler) {
  CurrentHandler = Handler;
  render();
});

Model.subject.subscribe((appState) => {
  currentAppState = appState;
  render();
});

function render() {
  // Cannot render before we have a handler
  if (!CurrentHandler) return;

  React.render(
    <CurrentHandler {...currentAppState} />,
    document.getElementById('app')
  );
}

编辑

你正在做的是你有一个 App组件，它是其他处理程序( Home 、 Login 和 About )的父路由处理程序。所以当路线变为/login时, 你的 App组件将被调用，它会得到 appState作为 Prop 展开。 App然后呈现 RouteHandler然后呈现 Login组件(因为这是路由匹配的)。但是Login不会得到 appState作为 Prop ，因为你没有从 App 传递它们.

如果你改变App呈现 <RouteHandler {...this.props} />而不是 <RouteHandler />你将传递所有App Prop RouteHandler然后将它们传递给 Login .