如何实现一个弹窗功能？

一开始自己是习惯了用第三方组件库提供的弹窗组件，但其实还不如自己实现一个比较简单，之前没用过这种用法，所以记录一下。

比如说我们想实现一个点击事件然后弹出一个弹窗，那我们这个弹窗可以使用高阶函数来实现。

//点击事件
onClick={()=>previewPopupFil()} //跳转到弹窗页面
//提示：previewPopupFil这里作为高阶函数，并不是UI组件

在我们弹窗组件中，会有一个​​高阶函数​​​和一个​​UI组件函数​​，高阶函数组件是把弹窗组件显示出来，UI组件就是我们弹窗组件里面的渲染了(具体渲染啥看需求)

preview-popup弹窗组件

const mountElement = document.createElement("div") //创建一个div元素，用来作为弹窗最大的父元素
//UI组件
function Modal (props){
  return(
    <></>
  )
}

//高阶组件
export function previewPopupFile ( ) {
  
}

previewPopupFil函数

export function previewPopupFile ( ) {
  if (mountElement.parentNode) { //如果它不是最大的父节点，直接return
    return
  }
  
  document.body.appendChild(mountElement)  //往body里面添加进去
  //将React 元素渲染到提供的 DOM 中mountElement
  //意思就是让我们的UI组件Modal添加到我们上面创建出来的div元素中
  ReactDOM.render((
    <Provider store={store}>
        <Modal/>
    </Provider>
  ), mountElement)
}

在react18中，​​hydrate(element, container[, callback])​​可以替代 ​​ReactDOM.render​​

Modal作为UI组件

一般来说我们有挂载，也要有卸载，卸载肯定是放在我们的UI组件中

//关闭按钮
  const onclose = ()=>{
    mountElement.parentNode && document.body.removeChild(mountElement) //在body中移除
    ReactDOM.unmountComponentAtNode(mountElement) //卸载react组件,react18中，可用root.unmount()代替
  }