关于React的全局Loading（17版本和18版本）

由于本人刚学习typescript，在一些类型的定义上稍显笨拙；如果有刚好遇到这边文章，希望大佬们能教教怎么给ZJLoading定义类型比较合适。。。

如下图所示，以后需要用到的时候只需引入组件，进行ZJLoading.show()和remove即可

import React, {memo} from "react";
import ReactDOM from 'react-dom'

import {LoadingWrapper} from "@/components/loading/style";

const ZJLoading: any = memo(() => {
  return (
    <LoadingWrapper>
      <div className="center-circle">
        <div className="circle-rotate"/>
      </div>
    </LoadingWrapper>
  )
})

ZJLoading.show = function (props: object | undefined) {
  this.div = document.createElement("div")
  this.div.setAttribute("id", "loading")
  document.body.appendChild(this.div);
  ReactDOM.render(<ZJLoading {...props}/>, this.div);
}

ZJLoading.remove = function () {
  this.div && ReactDOM.unmountComponentAtNode(this.div); // 从div中移除已挂载的Loading组件
  this.div && this.div.parentNode.removeChild(this.div); // 移除挂载的容器
}
export default ZJLoading

Reacr18

import React, {FC, memo, MemoExoticComponent} from "react";
import {createRoot, Root} from "react-dom/client";

interface ILoading extends MemoExoticComponent<FC> {
  show?: () => void,
  remove?: () => void,
  wrapperRoot?: Root
}

const ZJLoading: ILoading = memo(() => {
  return (
      <div style={{position: "fixed", zIndex: 9999}}>
        <p>你好</p>
      </div>
  )
})
ZJLoading.show = function () {
  const oWrapper = document.createElement("div")
  oWrapper.setAttribute("id", "loading_dialog")
  document.body.appendChild(oWrapper)
  this.wrapperRoot = createRoot(oWrapper)
  this.wrapperRoot.render(<ZJLoading/>)
}
ZJLoading.remove = function () {
  this.wrapperRoot?.unmount()
}
export default ZJLoading