Question

我想使用HOC组件来显示加载动画。一些组件具有道具“ isLoading”，而其他组件则具有“ isPending”。我如何给HOC一个默认的道具，使其显示装载程序？

isLoading
isPending
isNotReady
...

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

Answer 1

这应该有效。假设您的加载组件名称为Loading

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

Answer 2

您可以创建如下所示的WithLoader高阶组件：

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

然后像这样重复使用它：

<WithLoader>
  <YourComponent />
</WithLoader>

或

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

这样，您可以创建通用的高阶加载器组件，甚至可以将其用于多个同级组件。

P.S。。在WithLoader的上述实现示例中，假设您不想在DOM中使用任何其他标记，则使用<>{..}</>是react片段。如果您希望使用html容器进行样式设置，可以将其设置为<div>标记，而不是React.Fragment（<>）。

如何通过HOC显示装载机？

2 个答案: