主干路由器和反应状态

Question

根据路由设置 React 组件状态的标准方法是什么？我有以下 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
    )
})