backbone.router и React states

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, которые могут привести к плохим вещам.

Edit:

Ive с тех пор обновил свой маршрут обработки, я теперь просто сделать

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