ReactJS中如何获取Component的所有父Context Provider列表？

组件嵌套结构 #

<Context1.Provider value={...}>
<Context2.Provider value={...}>
<div>
...
<ContextNotIncluded.Provider value={...}>...</ContextNotIncluded.Provider>
<ContextN.Provider value={...}>
<Component />
</ContextN.Provider>
...
</div>
</Context2.Provider>
</Context1.Provider>

问题 #

ContextNotIncluded.Provider 并非 <Component /> 的父级，能否在 <Component /> 内获取所有父级 Context Provider 的列表（如 Context1、Context2、ContextN）？

解答 #

默认情况下做不到，React 没有原生 API 支持组件直接获取所有上层 Context Provider 的列表。

原因很明确：React 的 Context 采用按需订阅机制——组件必须通过 useContext(Context) 主动指定要订阅的某个 Context，才能拿到对应 Provider 的值。上层未被订阅的 Provider 对组件来说是完全透明的，组件无法感知它们的存在。

如果一定要实现类似需求，有两种可行思路：

• 手动维护全局注册表：创建 Context 时，把它存入一个全局数组。在组件里遍历这个数组，逐个用 useContext 尝试取值，通过默认值区分当前 Context 是否有上层 Provider 提供值。
• 封装自定义 Hook：把需要收集的 Context 列表作为参数传入 Hook，内部逐个调用 useContext，最终返回所有 Context 的值集合。

内容的提问来源于stack exchange，提问作者Oki