react封装Spin重复使用loading效果antd

原创

已于 2024-05-20 10:29:56 修改 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Spin #antd使用Spin #antd封装Spin重复使用 #Spin被drawer遮盖

于 2024-05-20 10:14:29 首次发布

1. 代码封装

import React, {
   
    useState } from 'react';
import {
   
    Spin } from 'antd';
import './index.scss';

// 自定义Hook useLoadings  
export const useLoadings = () => {
   
   
    // 存储loading的状态，key是loading的唯一标识，value是loading的显示状态  
    const [loadings, setLoadings] = useState<Record<string, boolean>>({
   
   });
    const [keyMap, setKeyMap] = useState({
   
   });

    /**
     * @description 随机生成key
     * @param length 
     * @returns { str }
     */
    function generateRandomString(length: any) {
   
   
        const len: number = typeof length === 'number' && length > 0 ? length : 10;
        const characters: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
        let result