如何向不传递props给子组件的React HOC中的子组件传参？

针对你遇到的这种HOC设计缺陷（无法直接给传入的子组件传递动态props），除了Context方案外，有更简洁直观的实现方式：

方案一：用useMemo缓存动态包装组件 #

直接解决嵌套组件不稳定的问题，同时能传递动态props：

import { useMemo } from 'react';

function MyComponent({ prop1, prop2 }) {
  // 仅当prop1变化时，才重新创建包装组件
  const WrappedComponentOne = useMemo(() => {
    return (props) => <ComponentOne prop1={prop1} {...props} />;
  }, [prop1]);

  return (
    <SomeHOC
      componentOne={WrappedComponentOne}
      componentTwo={ComponentTwo} 
    />
  );
}

原理 #

• useMemo会根据依赖数组[prop1]缓存包装组件，只有当prop1变化时才重新生成新的组件实例，避免了每次MyComponent渲染都创建新组件导致子组件重复挂载的问题。
• 包装组件内部可以直接捕获当前的prop1值，同时接收HOC传递的props并透传给ComponentOne。

方案二：封装可复用的curry包装函数 #

如果需要给多个子组件做类似包装，可以抽离复用逻辑：

import { useMemo } from 'react';

// 通用包装函数：接收目标组件和额外props，返回带绑定props的新组件
const wrapWithProps = (Component, extraProps) => {
  return (props) => <Component {...extraProps} {...props} />;
};

function MyComponent({ prop1, prop2 }) {
  const WrappedComponentOne = useMemo(() => {
    return wrapWithProps(ComponentOne, { prop1 });
  }, [prop1]);

  // 如果需要给componentTwo传props，同理
  const WrappedComponentTwo = useMemo(() => {
    return wrapWithProps(ComponentTwo, { prop2 });
  }, [prop2]);

  return (
    <SomeHOC
      componentOne={WrappedComponentOne}
      componentTwo={WrappedComponentTwo} 
    />
  );
}

方案对比 #

• Context方案：适合需要给多个层级、多个组件批量传递props的场景，但需要额外创建Context和Provider，代码层级稍复杂。
• useMemo包装方案：针对单个/少数子组件传props的场景更轻量，代码直观，没有额外的上下文嵌套，性能表现也更优（仅在依赖props变化时更新）。

注意事项 #

• 确保useMemo的依赖数组准确：所有需要传递给子组件的动态props都要加入依赖，避免闭包捕获旧值。
• 如果HOC内部对传入的组件做了缓存（比如用React.memo），依赖数组的准确性会直接影响组件更新的时机。

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