Блог

Я хочу использовать специальный компонент для отображения анимации загрузки. У некоторых компонентов есть реквизит «isLoading», а у других «isPending». Как я могу присвоить HOC значение по умолчанию, которое заставит его отображать загрузчик?

 isLoading
isPending
isNotReady
...

  const WithLoader = ControlledComponent => ({ isPending, ...props }) => {
  

Вы можете создать компонент более высокого порядка с помощью Loader, как показано ниже:

 export const WithLoader = ControlledComponent => ({
  isLoading, isPending, isNotReady, children,
}) => ((isLoading || isPending || isNotReady) ? <Loader />
  : <>{children}</>
);  

А затем повторно использовать его как:

 <WithLoader>
  <YourComponent />
</WithLoader>  

Или

 <WithLoader>
  <YourComponent1 />
  <YourComponent2/>
</WithLoader>
  

Таким образом, вы можете создать универсальный компонент загрузчика более высокого порядка, который можно использовать даже для нескольких родственных компонентов.

P.S. В приведенном выше примере реализации WithLoader <>{..}</> используются фрагменты react, предполагающие, что вы не хотите иметь никакой дополнительной разметки в DOM. Если вам нужен html-контейнер для целей стилизации, вы можете сделать его <div> тегом вместо React.Фрагмент(<>).

Это должно сработать. Предполагая, что имя вашего загружаемого компонента Loading

 const WithLoader = ControlledComponent => ({ isLoading, isPending, isNotReady, ...props }) => { 
  return (isPending || isLoading || isNotReady) ? 
  <Loading /> 
  : 
  <ControlledComponent {...props} />;
}