Javascript React路由器与RxJS数据流

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

我使用RxJS订阅我的数据存储，并将其作为道具通过应用程序传递：

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

现在有没有办法合并RxJS数据订阅并通过React路由器

解决方案 这是完整的解决方案，请注意

，它会将数据传递到应用程序中，但您需要通过道具传递数据

var-App=React.createClass({
渲染：函数（）{
返回(

家
关于
登录

);
}
});
变量路由=(
);
Router.run（路由、函数（处理程序）{
Model.subject.subscribe（（appState）=>{
反应(
,
document.getElementById（'app'）
);
});
});

您确定您的处理程序在

处理程序

组件中传播道具时需要道具吗

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

您希望在发生路由更改时以及在可观察对象中发生更改时都进行渲染。请尝试以下方法：

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')
  );
}

var CurrentHandler=null；
var currentAppState={}；
Router.run（路由、函数（处理程序）{
CurrentHandler=处理器；
render（）；
});
Model.subject.subscribe（（appState）=>{
currentAppState=appState；
render（）；
});
函数render（）{
//在有处理程序之前无法渲染
如果（！CurrentHandler）返回；
反应(
,
document.getElementById（'app'）
);
}

编辑

您要做的是，您有一个

App

组件，它是其他处理程序的父路由处理程序（

Home

、

Login

和

About

）。因此，当路由更改为

/login

时，您的

应用程序

组件将被调用，它将得到

appState

作为道具展开

App

然后呈现

RouteHandler

，然后呈现

Login

组件（因为这是路由匹配的内容）。但是

Login

不会将

appState

作为道具，因为您不会从

App

传递它们

---

如果您将

App

更改为渲染

而不是

，您将把

App

的所有道具传递给

RouteHandler

，然后将它们传递给

登录
我仍然得到相同的结果。如果在
React.render
之前为
currentAppState
执行console.log，它将输出正确的信息！根据之前的讨论，我被告知，也许Rx的CombineTest可以在这里起到救援作用，但仍然有类似的输出。线程的位置和输出到控制台的内容？它是物体吗？您的处理程序组件期望作为道具的是什么？这是它最初的工作方式，因此传递的是一个对象，而我正在从可观察对象获取一个对象。我要说的是，您可能有一个组件作为处理程序，用于获取
appState
作为道具传播的路由，但您正在寻找它（并且没有找到它）在另一个组件中，可能是
App
组件。您可以发布您的路由定义和处理程序吗？这是我尝试使用CombineTest->和原始版本->的完整代码，在react route v2.x中，此解决方案失效。
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')
    );
  });
});

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')
    );
  });
});

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')
  );
}