的解

Question

我有一个反应App，数据流由RxJS驱动 - ＆gt; here

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

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

下面是反应路由器通常如何自我渲染：

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

这是我到目前为止所提出的反应路由器正常但数据appState没有通过<handler />但它在React.render <之前正常注销/ p>

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}/>，它会将数据传递到应用中，但您需要通过道具<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组件中传播道具的方式？

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

您希望在路径更改发生时以及在observable中发生更改时呈现这两者。尝试这样的事情：

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作为道具展开。 App然后呈现RouteHandler，然后呈现Login组件（因为那是路由匹配的内容）。但是Login没有获得appState作为道具，因为您没有从App传递它们。

如果您更改App以呈现<RouteHandler {...this.props} />而不是<RouteHandler />，则会将所有App道具传递给RouteHandler，然后将其传递给Login到<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button> function sayThanks(){ var tE = document.getElementById('btn_out'); if (tE) tE.innerHTML = 'Tack'; }。

React Router和RxJS数据流

的解

1 个答案: