React Context下不同分支同结构后代组件差异化禁用按钮方案咨询

现有React组件树结构如下：

<A>
  <B>
    <D>
      <E/>
    </D>
  </B>
  <C>
    <D>
      <E/>
    </D>
  </C>
</A>

各组件渲染关系：

• A组件负责渲染B和C
• B、C组件分别渲染D
• D组件渲染E

在A组件中定义了一个作为状态的Context disabledChildCtx，初始值为字符串"B"，生命周期内仅在"B"和"C"两个值间切换，用于控制B或C分支下的按钮禁用状态。

E组件的代码如下：

const E = () => {
  const ctxVal = useContext(disabledChildCtx);
  return <button disabled = {/*.... some logic ....*/}></button>
}

E组件的按钮禁用规则：

1. 若E是B的后代组件，当Context值为"B"时，按钮禁用；
2. 若E是C的后代组件，当Context值为"C"时，按钮禁用。

当前问题：两个E组件获取的Context值完全相同，无法实现差异化的禁用判断。

方法1：通过B/C组件传递分支标识 #

核心思路是让E组件明确知道自己属于哪个分支，再结合全局Context的值做判断，有两种实现方式：

方式1：新增分支标识Context #

// 新增一个用于传递分支标识的Context
const BranchCtx = createContext(null);

// 修改B组件，给后代注入分支标识
const B = () => {
  return (
    <BranchCtx.Provider value="B">
      <D />
    </BranchCtx.Provider>
  );
};

// 修改C组件，同理注入分支标识
const C = () => {
  return (
    <BranchCtx.Provider value="C">
      <D />
    </BranchCtx.Provider>
  );
};

// 修改E组件，结合两个Context做判断
const E = () => {
  const disabledTarget = useContext(disabledChildCtx);
  const currentBranch = useContext(BranchCtx);
  // 当当前分支等于Context指定的禁用目标时，禁用按钮
  return <button disabled={disabledTarget === currentBranch}></button>;
};

方式2：逐层传递props #

如果不想新增Context，也可以通过props把分支标识传递到E组件：

// 修改B组件，给D传递分支标识
const B = () => {
  return <D branch="B" />;
};

// 修改C组件，同理传递分支标识
const C = () => {
  return <D branch="C" />;
};

// 修改D组件，把branch透传给E
const D = ({ branch }) => {
  return <E branch={branch} />;
};

// 修改E组件，结合props和Context判断
const E = ({ branch }) => {
  const disabledTarget = useContext(disabledChildCtx);
  return <button disabled={disabledTarget === branch}></button>;
};

方法2：修改Context的存储结构 #

直接改造disabledChildCtx的状态值，让它携带判断逻辑，不用额外传递分支标识：

// 修改A组件中的Context状态
const A = () => {
  const [disabledBranch, setDisabledBranch] = useState("B");
  // Context值改为一个函数，接收当前分支后返回是否禁用
  const disabledCtxValue = useCallback(
    (branch) => branch === disabledBranch,
    [disabledBranch]
  );
  
  return (
    <disabledChildCtx.Provider value={disabledCtxValue}>
      <B />
      <C />
    </disabledChildCtx.Provider>
  );
};

// 给B/C组件注入分支标识（复用方法1的BranchCtx）
const B = () => {
  return (
    <BranchCtx.Provider value="B">
      <D />
    </BranchCtx.Provider>
  );
};

// 修改E组件，调用Context中的判断函数
const E = () => {
  const checkDisabled = useContext(disabledChildCtx);
  const currentBranch = useContext(BranchCtx);
  return <button disabled={checkDisabled(currentBranch)}></button>;
};

方法3：在B/C组件中重写Context作用域 #

这种方式耦合性较高，仅作为临时方案：

// 修改B组件，重写Context的判断逻辑
const B = () => {
  const globalCtx = useContext(disabledChildCtx);
  // 内部Context返回：当全局值为"B"时禁用
  const localCtx = useCallback(() => globalCtx === "B", [globalCtx]);
  
  return (
    <disabledChildCtx.Provider value={localCtx}>
      <D />
    </disabledChildCtx.Provider>
  );
};

// 修改C组件，同理重写判断逻辑
const C = () => {
  const globalCtx = useContext(disabledChildCtx);
  const localCtx = useCallback(() => globalCtx === "C", [globalCtx]);
  
  return (
    <disabledChildCtx.Provider value={localCtx}>
      <D />
    </disabledChildCtx.Provider>
  );
};

// 修改E组件，直接调用Context中的判断函数
const E = () => {
  const shouldDisable = useContext(disabledChildCtx);
  return <button disabled={shouldDisable()}></button>;
};

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