@inject的Mobx地图商店怎么样？

Question

在Mobx（mobx-react）中，我们可以注入＆＃39;存储在像这样的React组件中：

@inject('store')
@observer class Abc extends React.Component {

}

这会导致Abc获得store prop，如this.props.store。 但inject如何将store映射到实际商店？

Answer 1

您首先将它们作为道具传递给提供者：

<Provider store1={} store2={}>
    <Abc />
</Provider> 

因此，Provider组件添加了传递给Provider Component的props以响应上下文。 React的Context现在自动将这些道具传递给每个组件。

要注入的唯一功能是，从上下文中读取stores对象，获取传入的字符串，通过字符串参数过滤stores对象并将其传递给组件。

如您所见，mobxStores是保存商店对象的变量。

您根本无法使用@inject并访问您的组件中的商店，如下所示：

this.context.mobxStores.YOUR_STORE_NAME

以下是代码：

• https://github.com/mobxjs/mobx-react/blob/master/src/Provider.js
• https://github.com/mobxjs/mobx-react/blob/master/src/inject.js

Answer 2

Mobx有一个Provider，您可以使用它将商店传递给组件。 Provider用于将依赖关系置于react的上下文中。

const yourStore = new YourStore();
const app = (
  <Provider yourStore={yourStore}>
    <Abc />
  </Provider>  
);
ReactDom.render(app, container);

现在您的组件Abc将以this.props.yourStore

的形式访问商店