导出默认 HOC（示例组件）不适用于功能组件 React

【问题标题】：export default HOC(SampleComponent) doesnt' work with functional component React导出默认 HOC（示例组件）不适用于功能组件 React
【发布时间】：2020-04-12 06:08:45
【问题描述】：

我无法将 HOC 的反应特性与功能组件一起使用。在下面的代码中导出默认 HOC({component: SampleComponent}) 不起作用

const SampleComponent: FC = () => {
  return (<div>Hello World</div>);
};

export default HOC({ component: SampleComponent });

HOC 很简单

const HOC = ({ component: Component }) => {
  return (<Component/>);
}

【问题讨论】：

标签： reactjs typescript react-hoc

【解决方案1】：

HOC 应该是

const HOC = ({ component: Component }) => {
  return (props: {}) => (<Component/>);
}

【讨论】：

太棒了！谢谢这工作。你能告诉我们为什么我们需要返回一个回调函数而不是直接返回组件吗？
@Prernashah HOC 是一个返回组件的函数。回调是一个不接受任何道具的组件。
现在如何在 HOC 中使用 hooks？
HOC可以不被视为功能组件吗？它肯定会返回 React 元素，即这里的组件。
也想有条件地渲染这个组件，像这样-
{!id ( ) : ( )}
这里 id 作为来自 graphql 查询钩子的响应，我再次无法在 HOC 函数中使用它。