Невозможно использовать крючок в HO C для функционального компонента

Question

Использование HO C для визуализации функционального компонента ie. SampleComponent здесь работает для меня.

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

export default HOC({ component: SampleComponent });

И HO C is ->

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

Однако я хочу сделать этот компонент условно, что-то вроде этого -

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

Здесь идентификатор приходит как ответ от ловушки запроса graphql, которую я снова не могу использовать в функции HO C.

Answer 1

Для начинающих крючки предназначены для замены HO C.

Однако вы можете определенно использовать хуки в HO C, который является функциональным компонентом. Единственное, что вам нужно убедиться, это то, что вы используете ловушку в компоненте, который отображается, а не в функции.

Например, использование ловушки, как показано ниже, некорректно, так как вы не визуализируете компонент HO C, но используйте это как 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>)
  }
}

Рабочий демонстрационный пример

Однако, когда вы реализуете его, как описано выше, вы, скорее всего, получите предупреждение ESLINT, поскольку ESLINT еще недостаточно интеллектуален, чтобы определить, как используется компонент. Вы можете отключить предупреждение для такого сценария ios