reactjs - 如何使用下面的文件结构访问 Mobx 商店

Question

假设我有这个基本上包含我所有现有商店的 .jsx 文件。

用户访问.jsx

import { observable, action, computed } from 'mobx';
export default new class UserAccess{
   @observable page_access = [];
}

商店.jsx

import { UserAccess } from './stores/user-access';

const stores = {
    "UserAccess" : UserAccess,
};

export default stores;

索引.jsx

import stores from './stores';

ReactDOM.render(
 <Provider stores = { stores } >
     <Router .... />
 </Provider>

我想在我的组件中访问它，我该怎么做？这就是我到目前为止所拥有的。

@inject('stores') @observer
export default class PageHeader extends React.Component{
........

}

如何访问可观察的 page_access 以及如何将商店本身注入到我的组件中？

score 1 · Accepted Answer

你似乎已经注射了它。您可以从道具访问注入的商店。只要你有观察者装饰器，组件就会自然地对商店的变化做出反应。

我看到一些我不确定是否与复制粘贴相关的小问题（您在用户访问中导出默认类但导入命名实例？）但假设这些东西正在工作，下面的代码应该可以工作。

@inject('stores') @observer
export default class PageHeader extends React.Component{
  render() {
    console.log(this.props.stores.UserAccess)
  }
}

1 回答 1