0

我目前Mobx-State-Tree用于管理我的 React 应用程序中表单的所有状态。我面临的问题是我想在表单的原子设计之后在页面级别创建商店，并通过 React Context 将商店传递给必要的组件，但我想避免将我的子组件包装在<Observer>标签中from Mobx-react，或者在我的孩子身上使用某种自定义包装器来消耗商店并将其作为道具传递给孩子。

必须有一个最佳实践吗？该Mobx-react文档指出：

"可以 读取 通过 使用 提供 的 商店Provider,React.useContext通过 使用MobXProviderContext可以 导入 的 上下文mobx-react. "

但是我找不到任何例子或解释如何最好地实施MobXProviderContext？我当前的设置如下（为了演示情况而进行了极大的简化）：

import { types } from "mobx-state-tree";

const ExampleContext = React.createContext("default");

const exampleStore = types.model({ prop: types.optional(types.string, "") }).create();

const ChildComponent = () => (
  <ExampleContext.Consumer>
    {example => <Observer>{() => <div>{example.prop}</div>}</Observer>}
  </ExampleContext.Consumer>
);

const ParentComponent = () => (
<ExampleContext.Provider value={exampleStore}>
   <ChildComponent />
</ExampleContext.Provider>
);

最终我对如何避免子组件上的嵌套感兴趣？我应该如何构建子组件？我将其应用到的情况是表单的状态管理，因此存储数据不断更新，因此孩子观察存储中值的任何更新至关重要。

希望这是有道理的，并且非常感谢有关如何最好地解决此问题的任何指导！

4

1 回答 1

0

请使用inject将存储注入您的组件。您也可以构建自己的提供程序，以便将商店传递给所有孩子。

于 2019-09-06T10:48:36.590 回答