react 基于antd封装一个loading工具类

为了方便在 React 项目中使用 Ant Design 的 Loading 组件，可以封装一个 Loading 工具类，以便在需要时快速调用。

以下是一个基于 Ant Design 的 Loading 工具类的示例：

import { Spin } from 'antd';

// 加载中组件
const Loading = () => (
  <div style={{ textAlign: 'center', marginTop: 50 }}>
    <Spin size="large" />
  </div>
);

// Loading 工具类
class LoadingUtil {
  static loadingInstance = null;

  static create() {
    if (!LoadingUtil.loadingInstance) {
      LoadingUtil.loadingInstance = Spin;
    }
    return LoadingUtil.loadingInstance;
  }

  static show() {
    const LoadingComponent = LoadingUtil.create();
    LoadingUtil.loadingInstance = LoadingComponent;
    LoadingComponent.show();
  }

  static hide() {
    const LoadingComponent = LoadingUtil.create();
    LoadingUtil.loadingInstance = LoadingComponent;
    LoadingComponent.hide();
  }
}

export default LoadingUtil;

在上面的代码中，首先定义了一个 Loading 组件，它是 Ant Design Spin 组件的包装，用于显示加载中的效果。

然后定义了一个 LoadingUtil 类，它包含了三个静态方法：

- `create()` 方法用于创建 Loading 组件实例；
- `show()` 方法用于显示 Loading 组件；
- `hide()` 方法用于隐藏 Loading 组件。

当需要显示 Loading 时，调用 `LoadingUtil.show()` 方法即可；当需要隐藏 Loading 时，调用 `LoadingUtil.hide()` 方法即可。

使用该 Loading 工具类的示例如下：

import React, { useState } from 'react';
import LoadingUtil from './LoadingUtil';

function MyComponent() {
  const [loading, setLoading] = useState(false);

  const handleButtonClick = () => {
    setLoading(true);
    LoadingUtil.show();
    // 异步操作
    setTimeout(() => {
      setLoading(false);
      LoadingUtil.hide();
    }, 2000);
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={handleButtonClick}>Fetch Data</button>
      {loading && <Loading />}
    </div>
  );
}

export default MyComponent;

在上面的代码中，当用户点击按钮触发异步操作时，设置 `loading` 状态为 `true`，同时调用 `LoadingUtil.show()` 方法显示 Loading 组件。

当异步操作完成后，设置 `loading` 状态为 `false`，同时调用 `LoadingUtil.hide()` 方法隐藏 Loading 组件。最后在 JSX 中根据 `loading` 状态来决定是否渲染 Loading 组件。