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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

首先，这是一个简单的示例应用程序，该应用程序使用MobX，React和react-

router进行路由：https :

//github.com/contacts-mvc/mobx-react-typescript

总的来说，我个人比较喜欢将所有相关存储作为组件的显式道具。但是，您也可以使用Ryan之类的包，通过与Redux

connect类似的React上下文机制，将商店存储传递到组件（请参阅此应用程序以获取示例）。

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

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

以上是 使用ES6类时如何使用mobx.js @observer将状态连接到props？ 的全部内容， 来源链接： utcz.com/qa/399750.html

回到顶部