用多个上下文包装组件的更好方法答案

【问题标题】：Better way to wrap components with multiple context用多个上下文包装组件的更好方法
【发布时间】：2019-07-10 10:17:20
【问题描述】：

基本上我的问题是，如果您的应用中有很多上下文，您的应用可能看起来像这样

<ContextOne.Provider value={contextOneVal}>

  <ContextTwo.Provider value={contextTwoVal}>

    <ContextThree.Provider value={contextThreeVal}>

      <ContextFour.Provider value={contextFourVal}>

         <div>App Here</div>

      </ContextFour.Provider>

    </ContextThree.Provider>

  </ContextTwo.Provider>

</ContextOne.Provider>

有没有更好的方法将核心应用包装在多个上下文中？

注意：是的，我知道 redux，我知道 redux 没有这个问题。

【问题讨论】：

它可以是单个提供者，其值作为对象属性。完全取决于这些上下文是什么以及如何使用它们。
这里有什么问题？你想改进哪方面？
@skyboyer 深嵌套是我想要避免的。
我不相信有很多选择。它要么是组合（通过嵌套在 JSX 中，要么是像 compose 这样的 HOC，但对于上下文）或继承（组合超级上下文，就像多个上下文的外观一样）。从这个角度来看，组合比继承更灵活。并且显式组合（嵌套 JSX）比辅助函数的隐式初始化更清晰/干净。所以最好习惯这样的语法:)

标签： reactjs react-context

【解决方案1】：

好吧，我最近遇到了同样的问题，并决定将嵌套结构移动到基于上下文列表的递归（在其中生成嵌套结构）的 HOC，并将其放入名为的 npm 包中 react-with-multiple-contexts.

对于提供商，您可以像这样使用名为 withContextProvider 的 HOC：

import React from 'react';
import { withContextProvider } from 'react-with-multiple-contexts';
import { ContextOne, ContextTwo, ContextThree, ContextFour } from './contexts';

const Component = (props) => (
  <React.Fragment>{props.children}</React.Fragment>
)

export const ComponentProvider = withContextProvider(Component, (props) => ([
  { context: ContextOne, value: props.contextOneVal },
  { context: ContextTwo, value: props.contextTwoVal },
  { context: ContextThree, value: props.contextThreeVal },
  { context: ContextFour, value: props.contextFourVal }
]));

// And later in code somewhere

<ComponentProvider
  contextOneVal="1"
  contextTwoVal="2"
  contextThreeVal="3"
  contextFourVal="4"
/>

同样的问题也适用于 Context.Consumer，如果您在一个地方需要多个消费者。出于同样的原因（避免代码库中的嵌套结构），您可以使用withContextConsumer，它也是前面提到的 npm 包中提供的。

【讨论】：