React中如何通过嵌套Provider实现全局Context的局部覆盖

结论 #

嵌套Provider实现全局状态局部覆盖的方案是完全可行的，你的实现没有生效是因为封装的StatusProvider组件没有处理外部传入的value属性。

问题原因 #

你当前写的StatusProvider内部硬编码了上下文的value为自身useState生成的状态元组，完全没有读取props中传入的自定义value，所以嵌套时传入的覆盖值会被直接忽略。

修复方案 #

修改StatusProvider的实现，优先使用外部传入的value，没有传入时再走默认的内部状态逻辑：

import React, { useState } from "react";
const StatusContext = React.createContext([{ disabled: false }, () => {}]);
const StatusProvider = props => {
  const [status, setStatus] = useState({ disabled: false });
  // 优先取传入的value， fallback 为内部默认状态
  const providerValue = props.value ?? [status, setStatus];
  return (
    <StatusContext.Provider value={providerValue}>
      {props.children}
    </StatusContext.Provider>
  );
};
export { StatusContext, StatusProvider };

传入值的格式要求 #

传入的自定义value需要和原上下文的格式保持一致：数组第一项为状态对象，第二项为状态修改方法。
如果仅需要固定覆盖状态，不需要修改能力，可以这么传：

<StatusProvider value={[{ disabled: true }, () => {}]}>
  <ChildComponent3 name={"ChildComponent3"} label={"ChildComponent3"} />
</StatusProvider>

如果需要保留局部状态的修改能力，可以在外层单独声明状态传入：

// 父组件内
const [customStatus, setCustomStatus] = useState({ disabled: true });

// 渲染逻辑
<StatusProvider>
  <ChildComponent1 name={"ChildComponent1"} label={"ChildComponent1"} />
  <StatusProvider value={[customStatus, setCustomStatus]}>
    <ChildComponent3 name={"ChildComponent3"} label={"ChildComponent3"} />
  </StatusProvider>
</StatusProvider>

修改完成后，ChildComponent3会读取最近的嵌套Provider的状态，其余子组件仍然使用外层全局Provider的状态，符合你的需求。

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