无法在 HOC 中将钩子用于功能组件

Question

使用 HOC 渲染功能组件，即。这里的 SampleComponent 对我有用。

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

export default HOC({ component: SampleComponent });

而 HOC 是->

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

但是我想有条件地渲染这个组件，就像这样-

<div> 
{!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
</div>

这里的 id 是来自 graphql 查询钩子的响应，我再次无法在 HOC 函数中使用它。

Answer 1

对于初学者来说，钩子旨在替代 HOC。

但是，您绝对可以在作为功能组件的 HOC 中使用钩子。唯一需要确保的是，您在渲染的组件中使用钩子，而不是函数。

例如使用下面这样的钩子是不正确的，因为你不渲染 HOC 组件而是像 const X = HOC(Component); 那样使用它

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

正确的做法是

const HOC = ({ component: Component }) => {
  return () => {
     const id = useQuery(query);
     return (<div> 
         {!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
     </div>)
  }
}

Working sample demo

但是，当您像上面那样实现它时，您可能会收到 ESLINT 警告，因为 ESLINT 还不够智能，无法检测组件的使用方式。 您可以禁用此类情况的警告