backbone.router和React状态

Question

根据路径设置React Component状态的标准方法是什么？我有以下React/Backbone示例:

var myApp = React.createClass({
  render: function() {
    return (
      <div className={this.state}></div>
    );
  }
})

var App = Backbone.Router.extend({
  routes: {
    "": "home",
    "create": "create"
  }
});

var app = new App();
app.on('route', function(page) {
  // How do I set state on myApp??
})

React.renderComponent(<myApp />, document.body);
Backbone.history.start();

我相信我需要能够myApp从外部设定状态,但是如何？我找不到任何关于此的例子.

或许我在这里想错了方向,有没有更好的方法与React一起组织路线？

Answer 1

我不知道一般的解决方案是什么,但我,有点简化,做的是

var App = Backbone.Router.extend({
  routes: {
    "": "home",
    "create": "create"
  }
});

var myComponent = false

function loadOrUpdateComponent(urlState) {
    if (!myComponent) {
        myComponent = <MyApp urlState={urlState}/>
        React.renderComponent(myComponent, document.body); 
    } else {
        myComponent.setProps({urlState:urlState})
    }
}


var app = new App();
app.on('route', function(page) {
  loadOrUpdateComponent(page)
})

Backbone.history.start();

因此,您问题的实际答案是.setProps(newProps)在先前渲染的组件上使用.我在事件处理程序中加载组件,因为否则你会在renderComponent和setProps之间遇到竞争条件,这可能会导致坏事.

编辑:

我已经更新了我的路线处理,现在我就这么做了

router.on('list', function() {
    React.renderComponent(<Component data={someData} />, mountPoint)
})

router.on("details", function(id) {
    React.renderComponent(<Component data={someData} selected={id} />, mountPoint)

})

router.on("extra-details", function(id) {
    React.renderComponent(
        <Component data={someData} selected={id}>
            <SpecificExtraComponent />
        </Component>
        , mountPoint
    )
})