React.js中如何向所有子组件传递特定props？

我需要在React.js中实现向所有层级的子组件传递{ disabled: boolean } props，要求子组件仅作为普通React组件直接使用该props，无需编写useContext等消费代码。

已知方案的局限 #

1. Context API：可以跨层级传递数据，但子组件必须通过useContext主动消费，不符合需求。示例代码：

const DisableContext = createContext({});

const ParentComponent = () => {
  const [disabled, setDisabled] = useState(false);
  return (
    <DisableContext.Provider value={{ disabled }}>
      <button onClick={() => setDisabled((old) => !old)}>{disabled ? 'Disabled' : 'Enabled'}</button>
      <ChildComponent />
    </DisableContext.Provider>
  )
}

const ChildComponent = () => {
  const { disabled } = useContext(DisableContext);
  return (
    <div>
      <p>ChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
      <GrandChildComponent />
    </div>
  )
}

const GrandChildComponent = () => {
  const { disabled } = useContext(DisableContext);
  return (
    <div>
      <p>GrandChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
    </div>
  )
}

2. cloneElement：仅能传递给直接子组件，孙组件无法获取；递归使用虽能实现，但性能开销过大。示例代码：

const WrapperComponentWhichPassesDisabledAsProps = ({ children, disabled }) => {
  return cloneElement(children, { disabled })
}

const ParentComponent = () => {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <button onClick={() => setDisabled((old) => !old)}>{disabled ? 'Disabled' : 'Enabled'}</button>
      <WrapperComponentWhichPassesDisabledAsProps disabled={disabled}>
        <ChildComponent />
      </WrapperComponentWhichPassesDisabledAsProps>
    </>
  )
}

const ChildComponent = ({ disabled }) => {
  return (
    <div>
      <p>ChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
      <SomeComponentWhichTakesNoProps />
    </div>
  )
}

// 孙组件无法获取disabled props
const SomeComponentWhichTakesNoProps = () => {
  return <GrandChildComponent />
}

const GrandChildComponent = ({ disabled }) => {
  return (
    <div>
      <p>GrandChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
    </div>
  )
}

已尝试方案 #

• 使用cloneElement：仅支持直接子组件，无法覆盖深层子组件
• 递归cloneElement：可实现但性能开销高，希望避免

期望目标 #

• 向所有层级的子组件传递{ disabled: boolean } props
• 子组件为普通React组件，直接接收并使用disabled props，无需编写消费逻辑

推荐方案：高阶组件(HOC) + Context API 组合 #

通过封装一个高阶组件(HOC)，自动从Context中获取disabled值并注入到目标组件的props中，子组件无需编写任何Context消费代码，直接使用props即可。

实现代码

1. 创建Context和HOC：

import { createContext, useContext } from 'react';

// 创建Context
const DisableContext = createContext({ disabled: false });

// 高阶组件：自动注入disabled props
const withDisabled = (Component) => {
  return (props) => {
    const { disabled } = useContext(DisableContext);
    // 合并组件原有props与注入的disabled
    return <Component {...props} disabled={disabled} />;
  };
};

2. 父组件使用Context Provider：

import { useState } from 'react';

const ParentComponent = () => {
  const [disabled, setDisabled] = useState(false);
  return (
    <DisableContext.Provider value={{ disabled }}>
      <button onClick={() => setDisabled(old => !old)}>
        {disabled ? 'Disabled' : 'Enabled'}
      </button>
      {/* 使用被HOC包裹的子组件 */}
      <WrappedChild />
    </DisableContext.Provider>
  );
};

3. 子组件与孙组件（无需编写消费逻辑）：

// 普通子组件，直接接收disabled props
const ChildComponent = ({ disabled }) => {
  return (
    <div>
      <p>ChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
      <SomeComponentWhichTakesNoProps />
    </div>
  );
};

// 中间组件无需处理props，直接渲染孙组件
const SomeComponentWhichTakesNoProps = () => {
  return <WrappedGrandChild />;
};

// 普通孙组件，直接接收disabled props
const GrandChildComponent = ({ disabled }) => {
  return (
    <div>
      <p>GrandChildComponent</p>
      <span>Parent is {disabled ? 'Disabled' : 'Enabled'}</span>
    </div>
  );
};

// 用HOC包裹需要接收disabled的组件
const WrappedChild = withDisabled(ChildComponent);
const WrappedGrandChild = withDisabled(GrandChildComponent);

方案优势

• 无侵入性：子组件完全是普通组件，直接通过props使用disabled，无需编写useContext或其他消费代码
• 性能高效：利用Context API的高效跨层级传递能力，避免递归cloneElement带来的性能损耗
• 灵活性强：可自由选择哪些组件需要注入disabled，不需要的组件无需包裹HOC

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