小编典典

使用ES6类时如何使用mobx.js @observer将状态连接到props?

reactjs

让我们在带有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中我对此有点迷惑。


阅读 381

收藏
2020-07-22

共1个答案

小编典典

首先,这是一个简单的示例应用程序,该应用程序使用MobX,React和react-
router进行路由:https :
//github.com/contacts-mvc/mobx-react-typescript

总的来说,我个人比较喜欢将所有相关存储作为组件的显式道具。但是,您也可以使用Ryan之类的包,通过与Redux
connect类似的React上下文机制,将商店存储传递到组件(请参阅此应用程序以获取示例)。

将商店存储在组件中后,解析ComponentWillMount中的路由参数,并相应地更新商店。

基本上应该就是全部了:)但是,请让我知道是否让我无话可说。

2020-07-22