封装一个loading组件——基于react

最近开发需求需求自己封装一个loading组件，是在react项目中。

直接上手吧！

封装 loading 组件

试想一下，一个loading组件最简单的就是显示与销毁。

1、显示

无非就是DOM渲染，看代码：

// 创建DOM元素
let element = document.createElement('div')
element.id = 'other-root';
// 将指定的DOM类型的节点加到document.body的末尾
document.body.appendChild(element);
// 通过ReactDOM渲染
ReactDOM.render(
    <LoadingNode
        content={data.content}
    />,
    element
);

2、销毁

直接看代码

// 移除DOM元素
element.remove()

完整代码如下：

RLLoading.js

import React from 'react';
import ReactDOM from 'react-dom'

import './RLLoading.css'

const LoadingNode = (props) => {
    const { content } = props;
    return (
        <div className="loading-mask-container">
            <div className="loading-content">
                <div className="loading-cir-la" />
                <div className="loading-cir-la-content">{content ? content : '正在加载'}</div>
            </div>
        </div>
    )
}

class Loading extends React.Component {
    constructor(props) {
        super(props);
        let element = document.createElement('div')
        element.id = 'other-root';
        this.state = {
            element
        }
    }

    open = (data) => {
        const { element } = this.state;
        document.body.appendChild(element);   // 将指定的DOM类型的节点加到document.body的末尾
        ReactDOM.render(
            <LoadingNode
                content={data.content}
            />,
            element
        );
    }
    close = () => {
        const { element } = this.state;
        element.remove()
    }
}

const RLLoading = new Loading();
export default RLLoading;

样式文件 RLLoading.css

.loading-mask-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.50);
}
.loading-mask-container .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loading-mask-container .loading-content .loading-cir-la {
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-top-color: #8F1D22;
    animation: roateloading .6s infinite linear;
}
.loading-mask-container .loading-content .loading-cir-la-content {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-top: 3px;
}

@keyframes roateloading {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

使用 loading 组件

拿文件上传举例，开始上传前【显示】DOM ，上传请求处理后【销毁】DOM 。

测试代码如下：

import commonAction from './commonActions.js';
import RLLoading from './RLLoading.js';
// 显示DOM
RLLoading.open({
    content: '正在上传'
});
let formData = new FormData();
formData.append('file', upload.file);
commonAction.fileUpload(formData).then(res => {
    // TODO 上传响应处理
}).catch(err => {
    console.log('上传err :>> ', err);
}).finally(() => {
	// 销毁DOM
    RLLoading.close();
})