3

从React todomvc 1中可以看出，确保 ui 与模型保持同步的一种方法是让模型订阅 render 函数（如下所示），以便 UI 在每次更改时呈现。

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

model.subscribe(render);
render();

如果在应用程序中使用 React 路由器，则必须将 React.render 调用包装在路由器中，如本演示所示

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

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

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

    model.subscribe(render);
    render();
4

1 回答 1

2

我认为如果你要创建一个完全反应的应用程序并使用反应路由器，那么我个人认为使用这个模型并不是最好的方法。最终我认为更好的解决方案是根本不使用这个模型，而只是使用 react 来处理所有的变化。但是，如果您要尝试使用现有模型和 react-router 执行此操作，我会在您的应用程序根目录中引用 state 中的模型，然后将 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);
});
于 2015-03-19T05:54:17.940 回答