Question

我有一个React组件，我将一些MobX值注入其中。它包含一个深层嵌套的儿童树。我不是将所有子项所需的所有值都注入到父组件中，而是将它们传递到整个树中，而是将一些数据直接注入到各个子组件中。

这样可以正常工作，但如果我想在我的应用中使用不同数据的这个树的两个实例怎么办？我可以将不同的数据注入到顶部组件的两个实例中，但是如何区分也需要注入不同数据的子组件呢？

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

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

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

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

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

Answer 1

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

如果无法在组件A上指定，则无法指定进入C（foo.y）的内容。

道具的整体思想是控制子组件中较高组件的值。这种方式Props是如何使用组件A（包括组件C）的合同。

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

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

这样，组件A根本不需要了解compoent C.

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

具有与之交互的道具的纯组件，如果需要，还有一些内部状态
与Global state（mobx Store）直接对话的组件。

尝试使每个组件纯粹/抽象都是过度杀伤，这些更高级别的组件仍然是特定于应用程序而无法真正重复使用。

用mobx反应注入嵌套组件

1 个答案: