如何在不同场景复用React组件并避免Prop Drilling？

你需要在两种场景下复用组件，当前通过props传递方法导致多层嵌套组件出现Prop Drilling，以下是几种可行的解决方案：

1. 扩展Context注入场景化方法 #

既然已有MyContextProvider存储共用状态，可以直接扩展Context，将不同场景的交互方法注入进去，让深层组件通过useContext直接获取，无需逐层传递props。

实现示例： #

// 扩展Context类型，包含方法定义
import { createContext, useState } from 'react';

const MyContext = createContext<{
  // 原有共用状态
  appState: any;
  // 场景化方法
  methodA: () => void;
  methodB: () => void;
}>({
  appState: {},
  methodA: () => {},
  methodB: () => {},
});

// 修改Provider，支持传入场景化方法
const MyContextProvider = ({ children, methods }) => {
  const [appState, setAppState] = useState(/* 原有初始化逻辑 */);
  
  return (
    <MyContext.Provider value={{ appState, ...methods }}>
      {children}
    </MyContext.Provider>
  );
};

// App.tsx中按路由场景注入不同方法
const App = () => {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <MyContextProvider methods={{ methodA: method1, methodB: method2 }}>
            <MainComponent />
          </MyContextProvider>
        }
      />
      <Route
        path="/other"
        element={
          <MyContextProvider methods={{ methodA: method3, methodB: method4 }}>
            <OtherComponent />
          </MyContextProvider>
        }
      />
    </Routes>
  );
};

// 深层嵌套组件直接获取方法
const DeepNestedComponent = () => {
  const { methodA } = useContext(MyContext);
  return <div onDoubleClick={methodA}>双击触发交互</div>;
};

2. 组件组合（Component Composition） #

利用React的组合特性，把需要绑定交互逻辑的组件作为children或自定义props传递给ReusableComponent，跳过中间组件的props传递环节。

实现示例： #

// 重构ReusableComponent，只负责渲染固定UI框架
const ReusableComponent = ({ content }) => {
  return (
    <div className="reusable-wrapper">
      {/* 组件固定展示部分 */}
      <div className="fixed-header">通用头部</div>
      {/* 传入的交互内容区域 */}
      {content}
    </div>
  );
};

// MainComponent中直接传入绑定好方法的组件
const MainComponent = () => {
  return (
    <ReusableComponent
      content={<ComponentThatNeedsMethods onDoubleClickA={method1} onDoubleClickB={method2} />}
    />
  );
};

// OtherComponent同理，传入绑定不同方法的组件
const OtherComponent = () => {
  return (
    <ReusableComponent
      content={<ComponentThatNeedsMethods onDoubleClickA={method3} onDoubleClickB={method4} />}
    />
  );
};

这种方式让ReusableComponent只专注于通用结构渲染，交互逻辑由上层组件直接绑定到传入的子组件上，彻底避免Prop Drilling。

3. 自定义Hook封装场景逻辑 #

把不同场景的交互方法封装到自定义Hook中，深层组件直接调用Hook获取对应方法，无需依赖props传递。

实现示例： #

// 自定义Hook，根据场景返回对应方法
import { useContext } from 'react';
import MyContext from './MyContext';

const useSceneMethods = (scene: 'main' | 'other') => {
  const { appState, setAppState } = useContext(MyContext);

  switch (scene) {
    case 'main':
      return {
        methodA: () => {
          // method1的逻辑，比如更新Context状态
          setAppState(prev => ({ ...prev, key: 'newValue' }));
        },
        methodB: () => {
          // method2的逻辑
        },
      };
    case 'other':
      return {
        methodA: () => {
          // method3的逻辑
        },
        methodB: () => {
          // method4的逻辑
        },
      };
    default:
      return { methodA: () => {}, methodB: () => {} };
  }
};

// 深层组件使用Hook获取方法
const DeepNestedComponent = () => {
  const { methodA } = useSceneMethods('main');
  return <div onDoubleClick={methodA}>双击触发</div>;
};

如果场景可以通过路由参数或Context中的标识自动判断，还可以在Hook内部自动识别场景，无需手动传入scene参数。

4. 高阶组件（HOC）注入方法 #

创建高阶组件，给需要方法的组件注入对应的交互逻辑，适用于需要批量给多个组件添加相同场景方法的情况。

实现示例： #

// 定义高阶组件
const withSceneMethods = (methods) => (Component) => {
  return (props) => {
    return <Component {...props} {...methods} />;
  };
};

// 给ComponentThatNeedsMethods注入main场景的方法
const MainSceneComponent = withSceneMethods({ methodA: method1, methodB: method2 })(ComponentThatNeedsMethods);

// 给ComponentThatNeedsMethods注入other场景的方法
const OtherSceneComponent = withSceneMethods({ methodA: method3, methodB: method4 })(ComponentThatNeedsMethods);

// MainComponent中使用注入后的组件
const MainComponent = () => {
  return <ReusableComponent component={<MainSceneComponent />} />;
};

不过HOC可能会导致组件嵌套层级加深，现在更多被Hook和组合模式替代，但仍是一种可行方案。

方案推荐 #

• 优先选择扩展Context+自定义Hook：符合React状态管理的现代实践，既能统一管理状态和方法，又能让组件按需获取逻辑。
• 其次是组件组合：代码更直观，适合交互逻辑与UI结构耦合度较高的场景，避免额外的状态管理复杂度。

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