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
    )
})

backbone.router和React状态

1 个答案: