如何在模型中使用 React-Router

Question

正如您从 React todomvc 1 中看到的那样，确保 ui 与模型保持同步的一种方法是让模型订阅渲染函数（如下所示) 以便 UI 在每次更改时呈现。

function render() {
    React.render(
        <TodoApp model={model}/>,
        document.getElementById('todoapp')
    );
}

model.subscribe(render);
render();

如果在应用程序中使用 React 路由器，您必须在路由器中包装 React.render 调用，如所示as shown by this demo

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

那么，如果您还需要更新模型，您将如何使用路由器？即如何在路由器和 function render 中包装 React.render？这会产生范围问题

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

    model.subscribe(render);
    render();

Answer 1

我认为如果你打算创建一个完全反应的应用程序并使用反应路由器，那么我个人认为使用这个模型并不是最好的方法。最终，我认为所有这些问题的更好解决方案是根本不使用此模型，而仅使用 React 来处理所有更改。但是，如果您尝试使用现有模型和 react-router 执行此操作，我会在应用程序的根目录中引用状态中的模型，然后将 setState 传递给模型订阅方法。
http://jsfiddle.net/xw8uc0nf/3/

var model = TodoModel

var App = React.createClass({

getInitialState: function(){
    return({localModel: model});
},
componentDidMount: function(){
    model.subscribe(this.updateModel.bind(this))
},

updateModel: function(){
    this.setState({localModel: model});
},
  render: function () {
    return (
      <div>
        <header>Super TODO app</header>
        <TodoApp model={@state.localModel} />
      </div>
    );
  }
});

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

如何在模型中使用 React-Router

How to use React-Router with a model

reactjs

react-router