时间戳

首页 > 解决方案 > 使用 mobx-react 注入嵌套组件

reactjs - 使用 mobx-react 注入嵌套组件

问题描述

我有一个 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)

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

标签： reactjsmobxmobx-react

解决方案

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

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

props 的整个想法是让更高的组件控制子组件中的值。这种方式 Props 是如何使用组件 A（包括组件 C）的合同。

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

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

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

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

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

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

推荐阅读