二次封装antd-mobile loading组件 — ActivityIndicator，实现以api的方式调用

前言

实现方式

具体代码如下：

1、新建loading.tsx文件（这里我用的是typescript，没用过ts的同学创建jsx就可以），创建Loading类

2、constructor函数中创建div节点，赋给变量div

3、showLoading方法用法显示loading组件，这里用到了react-dom的render方法，render之后向body的插入div节点

4、hideLoading方法用于移除loading组件，调用时移除body中的创建的div节点

5、实例化Loading，并导出

import * as React from 'react'
import ReactDom from 'react-dom'
import {ActivityIndicator} from 'antd-mobile'

class Loading {
    private div: HTMLElement

    constructor() {
        this.div = document.createElement('div')
    }

    showLoading = (): void => {
        ReactDom.render(<ActivityIndicator toast animating text={'加载中'}/>, this.div)
        document.body.appendChild(this.div)
    }

    hideLoading = (): void => {
        document.body.removeChild(this.div)
    }
}

const loading = new Loading()
export default loading

页面中使用：

import loading from './loading.tsx'

test = () => {
	loading.showLoading()
	setTimeout(()=>{
		loading.hideLoading()
	}, 1500)
}

是不是很简单呢？其实我们在使用第三方UI组件库的时候回经常遇到库中的组件并不适用于实际的开发场景，这就需要我们开动脑筋去基于组件做二次的封装以达到我们想要的效果。

觉得有用的同学点个赞啦~~~