React编程式弹窗

前言

React目前主流的Antd库其实蛮好用的，但是有些自定义的东西还是要自己来写的。
同时再批判一下现在的博客文章良莠不齐，垃圾的要死，很多东西烂的不能再烂，写的是什么东西。

话不多说了直接贴代码
（CSS样式自己写）

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

const Element = () => {
    
    
    return <div style={
    
    {
    
     width: '400px;', height: '500px', background: "red" }}>
        <button onClick={
    
    GlobalElement.destroy}>关闭</button>
    </div>
}

const ELEMENT_ID: string = "test-dom"

const GlobalElement = {
    
    
  install: () => {
    
    
    // 在body里面创建一个dom，同时挂载，然后通过React.render去挂载渲染对应的jsx node
    // 其实和vue的 Vue.mount函数没有区别，用法思路是一样的
    if (!React.findDOMNode(document.getElementById(ELEMENT_ID))) {
    
    
      const element: HTMLDivElement = document.createElement("div");
      element.id = ELEMENT_ID
      document.body.appendChild(element)
      React.render(<Element/>, element)
    }
  },
  destroy: () => {
    
    
    const targetDOM = document.getElementById(ELEMENT_ID) as HTMLElement
    const unmountResult = ReactDOM.unmountComponentAtNode(targetDOM);
    if (unmountResult) {
    
    
        document.body.removeChild(targetDOM)
    }
  }
}

export default LoginGlobalElement

用法自己知道，如果怎么用都不知道的话，我建议你放弃React或者重学React
这个写法和Vue的是类似的方法，都是创建一个空的Dom元素，把Dom挂载在body上，然后将需要渲染的JSXElement渲染入刚刚创建的Dom中。