让我们在带有React和React Router的应用程序中上这样的类。
@observer class Module1 extends React.Component { constructor (props) { super(props); //... } componentWillMount(){ //... } method(){ //... } otherMethod(){ //... } render() { return ( <ChildComp bars={this.props.bars}/>} ); } }
让我们采取这样的状态
state = observable({ module1:{ bars:{ //... } }, module2:{ foos:{ //... } } })
这样加载Module1组件:
//index.js render( <Router history={browserHistory}> <Route path="/" component={App}> <Route path='/map' component={Module1} > <Route path="/entity/:id" component={SubModule}/> </Route> <Route path='/map' component={Module2} > </Route> </Router>, document.getElementById('render-target') );
如何将道具传递module1.bars给Module1组件?在redux中,我会使用<provider>,redux- connect但是在Mobx.js中我对此有点迷惑。
module1.bars
<provider>
redux- connect
首先,这是一个简单的示例应用程序,该应用程序使用MobX,React和react- router进行路由:https : //github.com/contacts-mvc/mobx-react-typescript
总的来说,我个人比较喜欢将所有相关存储作为组件的显式道具。但是,您也可以使用Ryan之类的包,通过与Redux connect类似的React上下文机制,将商店存储传递到组件(请参阅此应用程序以获取示例)。
将商店存储在组件中后,解析ComponentWillMount中的路由参数,并相应地更新商店。
基本上应该就是全部了:)但是,请让我知道是否让我无话可说。