React中无法传递事件属性给HOC，触发父组件刷新函数遇阻

现有组件渲染结构如下：

import ParentComponent from "../folder"
<ParentComponent      
  dataComponent={() => (
    <ExampleComponent
      {...{prop1, prop2, prop3 }} />
  )}
/>

const ExampleComponent = ({
  prop1,
  prop2,
  prop3
}) => (
  <>
    <View style={}>
      {!error && (
        <text
          size={5}
        >
          {dummyText}
        </text>
      )}
    </View>
    <Error onTap={tap}/>
  </>
)

<Error>组件的onTap会在用户点击时触发对应函数；ParentComponent来自外部文件，内部有如下代码：

return <ErrorComponent onTap={reFreshData} />;

需求是点击ExampleComponent内的<Error>组件时，触发ParentComponent中的reFreshData函数，但当前无法实现该事件传递流程，同时存在高阶组件（HOC）无法传递事件属性的问题。

1. 让ParentComponent向子组件暴露刷新函数 #

修改ParentComponent，将内部的reFreshData函数作为参数传递给dataComponent，让ExampleComponent能直接拿到该函数：

// ParentComponent.js
const ParentComponent = ({ dataComponent }) => {
  const reFreshData = () => {
    // 原有刷新逻辑
    console.log("执行数据刷新");
  };

  // 将reFreshData传入dataComponent
  return (
    <>
      <ErrorComponent onTap={reFreshData} />
      {dataComponent(reFreshData)}
    </>
  );
};

2. 在ExampleComponent中绑定刷新函数 #

调整调用ParentComponent的代码，接收传递的刷新函数并传给ExampleComponent，最终绑定到<Error>的onTap上：

// 调用ParentComponent的文件
import ParentComponent from "../folder";

const PageComponent = () => {
  return (
    <ParentComponent
      dataComponent={(refreshData) => (
        <ExampleComponent
          {...{ prop1, prop2, prop3 }}
          onErrorTap={refreshData}
        />
      )}
    />
  );
};

// ExampleComponent.js
const ExampleComponent = ({ prop1, prop2, prop3, onErrorTap }) => (
  <>
    <View style={{}}>
      {!error && (
        <text size={5}>
          {dummyText}
        </text>
      )}
    </View>
    {/* 绑定ParentComponent的reFreshData到Error组件 */}
    <Error onTap={onErrorTap} />
  </>
);

3. 解决HOC的事件传递问题 #

如果ParentComponent是高阶组件，需要确保HOC将内部函数或接收的回调属性完整传递给被包裹组件：

// 高阶组件示例
const withParentHOC = (WrappedComponent) => {
  return (props) => {
    const reFreshData = () => {
      // 刷新逻辑
    };

    // 将reFreshData与所有props一起传递给被包裹组件
    return <WrappedComponent {...props} refreshData={reFreshData} />;
  };
};

// 使用HOC时直接获取并传递刷新函数
const EnhancedComponent = withParentHOC(({ refreshData }) => (
  <ExampleComponent
    {...{ prop1, prop2, prop3 }}
    onErrorTap={refreshData}
  />
));

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