如何获取同一上下文的多个上下文提供者的值答案

【问题标题】：How to get the values of multiple context provider of the same context如何获取同一上下文的多个上下文提供者的值
【发布时间】：2021-10-20 07:37:22
【问题描述】：

我有两个用于同一上下文的上下文提供程序。第一个提供者提供了许多状态和方法。但是第二个提供者提供了一个相对较小的状态和方法。第一个提供者包装了第二个提供者。因此，这两个提供者内部的组件似乎只能获得第二个提供者提供的值。我希望是否有任何方法可以获得第二个内部提供者未提供但由第一个上部组件提供的状态或方法。

<ContextXProviderOne> // let say this provider provides only 10 states and 10 methods
<ContextXProviderTwo> // this provider provides only 3 states and 3 methods
  //
  //
  <SomeComponent /> 
  ...
  ...
  //
  //
</ContextXProviderTwo>
</ContextXProviderOne>

所以在我的情况下，我希望这两个提供程序中的组件能够访问在 ContextXProviderTwo 中找到的 3 个状态和 3 个方法，如果在 ContextXProviderTwo 中找不到请求的状态或方法，我希望他们可以在上面查找ContextXProviderOne。

【问题讨论】：

另外你为什么不把所有的状态都包装在一个 Context.Provider 中？

标签： reactjs react-context

【解决方案1】：

React Context 只能保存 1 个值，使用 2 个 Provider 会导致第 2 个 Provider 覆盖它为子组件提供的值。

根据 React 文档：

Provider 组件接受一个 value prop 传递给消费作为此 Provider 的后代的组件。一个提供者可以是连接到很多消费者。 提供者可以嵌套覆盖树中更深的值。

【讨论】：