Внедрение во вложенные компоненты с помощью mobx-реакции

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

Я использую метод инъекции «Customizing inject», поэтому мои компоненты принимают отдельные значения, а не одно хранилище.

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

Не уверен, что это лучший способ сделать это.

Answer 1

То, что вы хотите, по логике невозможно.

Вы не можете указать, что входит в C (foo.y), если вы не можете указать это для компонента A.

Вся идея реквизита состоит в том, чтобы контролировать высший компонент по значениям в подкомпоненте. Таким образом, реквизиты - это контракт о том, как можно использовать компонент А (включая компонент С).

Если вы не всегда хотите использовать компонент A с компонентом C, вы можете внедрить компонент C только в корневой каталог, если хотите, чтобы он был дочерним:

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

таким образом, компоненту А вообще не нужно будет знать о компоненте С.

Чтобы кодирование было простым и не обременительным в какой-то момент, вам нужно разделить ваши компоненты на две части:

• Чистые компоненты, имеющие подпорки, с которыми он взаимодействует, и некоторое внутреннее состояние, если необходимо.
• И компоненты, напрямую взаимодействующие с глобальным состоянием (mobx Store).

Попытка сделать КАЖДЫЙ компонент чистым / абстрактным просто излишня, эти компоненты более высокого уровня все равно будут слишком специфичными для приложения, чтобы действительно использовать их повторно.