使用 mobx-react 注入嵌套组件答案

【问题标题】：Injecting into nested components with mobx-react使用 mobx-react 注入嵌套组件
【发布时间】：2018-04-28 05:07:47
【问题描述】：

我有一个 React 组件，我正在向其中注入一些 MobX 值。它包含一棵嵌套很深的子树。我没有将所有子组件需要的所有值都注入到父组件中，并将它们向下传递到整个树中，而是将一些数据直接注入到各个子组件中。

这很好用，但是如果我想在我的应用程序中使用不同的数据来创建这棵树的两个实例怎么办？我可以将不同的数据注入到顶层组件的两个实例中，但是如何区分也需要注入不同数据的子组件呢？

例如，如果我在两个地方使用组件 A，我可以为它们注入两个不同的 x 值。但是如果 A 包含组件 C 作为后代，我如何将 y 的两个不同值注入它们（除了将它们注入每个 A 并将它们传递到树中）？

      ------ root --------
     /                    \
    A <-- inject foo.x     A <-- inject bar.x
   /                        \
  B                          B
 /                            \
C <-- inject foo.y             C <-- inject bar.y

我正在使用“自定义注入”注入方法，因此我的组件采用单独的值而不是单个存储。

const UserNameDisplayer = inject(
    stores => ({
        name: stores.userStore.name
    })
)(NameDisplayer)

不确定这是否是最好的方法。

【问题讨论】：

我不认为我得到了这个问题，您可以根据需要向树中注入任意数量的 Provider
@mweststrate 添加了第三段和图表。希望澄清一下。
Em 不是真的 :) 你确定你没有想太多，为什么不直接注入 foo / bar？或者用一个组件包装 C，该组件有一个配置它应该选择哪个商店的道具？还是在不同的 A 处创建不同的提供者？（提供者不必位于根目录）

标签： reactjs mobx mobx-react

【解决方案1】：

你想要的东西在逻辑上是不可能的。

如果不能在组件 A 上指定，则不能指定 C (foo.y) 中的内容。

props 的整个想法是让更高的组件控制子组件中的值。这样，Props 就是如何使用组件 A（包括组件 C）的契约。

如果您不总是想将组件 A 与组件 C 一起使用，您只能在根目录注入组件 C，如果您希望它作为子组件：

<A/>
// or with C as child:
<A> 
  <C someProps={} />
</A>

这样组件 A 根本不需要知道组件 C。

为了保持编码简单而不是在某些时候成为负担，您需要将组件分成两部分：

具有与之交互的 props 和一些内部状态（如果需要）的纯组件
以及直接与全局状态（mobx 存储）对话的组件。

试图使每个组件都成为纯粹/抽象的做法简直是矫枉过正，这些更高级别的组件仍然过于特定于应用程序而无法真正重用。

【讨论】：