使用mobx-react注入嵌套组件

Question

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

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

Answer 1

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

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

props的整体思想是让更高的组件对子组件中的值进行控制。这样，Props就是如何使用组件A(包括组件C)的契约。

如果您不总是希望使用组件A和组件C，那么如果您希望组件C作为子组件使用，则只能在根目录中注入组件C：

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

这样，组件A就完全不需要知道组件C了。

为了保持编码简单，并且在某些时候不会成为负担，你需要将你的组件一分为二：

• 纯组件，具有与其交互的道具和一些内部状态(如果需要)
• ，以及直接与全局状态对话的组件(mobx Store)。

试图让每个组件都是纯/抽象的，这太夸张了，这些更高级别的组件仍然是特定于应用程序的，无法真正重用。