动态生成弹窗组件
动态生成消息弹窗组件思路
创建一个append到body的div，把动态生成的组件放到这个div里面，挂载到body上。内容可以通过传参的方式实现内容填充。而关闭弹窗的方法是通过重新渲染的方式。
//动态生成组件
const alert=(content:string)=>{
const component=
<Dialog visible={true} }}>
{content}
</Dialog>
const div=document.createElement('div')
document.body.append(div)
ReactDOM.render(component,div)
}
export {alert}
关闭弹窗组件的方式
在上面代码的Dialog标签里面增加属性方法，这里是自定义的名为onClose的方法，触发一个函数，因为上面的visible为true已经渲染好了，就需要用重新渲染的方式，修改visible为false，使得弹窗隐藏实现关闭弹窗。
<Dialog visible={true}
onClose={
()=>{
ReactDOM.render(React.cloneElement(component,{visible:false}),div);
ReactDOM.unmountComponentAtNode(div)
div.remove()
}
}>
{content}
</Dialog>
虽然内部内容隐藏了实现弹窗的关闭，但是append在body中的容器div还是遗留在页面当中，需要进行删除。安全删除的方式先需要ReactDOM.unmountComponentAtNode()卸载节点，再使用div.remove()移除。因为直接div.remove()移除的话节点上面可能存在的事件方法会直接丢失
ReactDOM.unmountComponentAtNode(div) div.remove()
