反应函数高阶分量

Question

高阶组件不为功能组件工作。

我试图创建一个示例函数hoc。我正在使用react hook useState并将状态传递给传递的组件。下面是我的代码

function HOC(WrapperComponent) {
  // outside of return function
  const [course] = useState({ id: 0, name: "Raja/Kondla" });
  return function() {
     return <WrapperComponent course={course} />;
  };
}

const Comp = HOC(({ course }) => {
  return (
    <>
      <div>HOC</div>
      <div>{course.id}</div>
      <div>{course.name}</div>
      <div>-------------------</div>
    </>
  );
});

ReactDOM.render(<Comp />, rootElement);

当我运行它时，我得到低于错误。

null

function HOC(WrapperComponent) {
  return function() {
      // inside return function
    const [course] = useState({ id: 0, name: "Raja/Kondla" });
    return <WrapperComponent course={course} />;
  };
}

HOC
0
Raja/Kondla

谁能给我解释一下是什么原因吗？而使用函数HOC，会不会有性能影响？

提前致谢

Answer 1

您的HOC是一个函数，它返回一个react组件，这就是为什么当您将行放入返回的函数组件中时它会工作。

说到这里，我会重新考虑在使用钩子时对HOC的需求，HOC的目的是在组件之间共享逻辑，钩子解决了同样的挑战（以更好的方式）。

很难理解您在示例中试图与HOC共享什么逻辑，但我会选择自定义钩子。