标签:
React.js

react怎么自定义一个全局的弹出对话框?可以在其他地方直接调用

提问于:1 个月前 ( )最后更新于:1 个月前 (2020-10-30 01:41:24)提问人:豆瓣123455


react: 16.13.1
bootstrap: 4.5.2

在react中, 我想弹出一个对话框,
但是我不想 每次都在组件里塞进去 一个 对话框组件,
我用的bootstrap, 每次调用对话框,必须提前在组件内部放上 modal对话框的代码, 然后才能用react 控制 modal的显示与隐藏,
这非常的麻烦, 每次都要加很多代码

我希望,可以直接调用一个函数,类似 JavaScript自带的alert函数, 执行就可以弹出对话框, 这个函数, 最好可以让我直接把组件代码传递进去, 最好是同时支持hooks的方式

想问问,大家有什么思路?

1个回答

豆瓣123455
豆瓣123455

解决了, 在这期间,尝试了以下几个项目

https://github.com/reactjs/react-modal
https://github.com/mpontus/react-modal-hook
https://github.com/iamhosseindhv/notistack

最终决定,自己写了一个 对话框:
代码如下: 大家可以根据自己的需要 进行改写:

const MessageBox= (title, content) => {
 const handleClose = () => { // 点击关闭后,从dom中删除对话框以节省资源
  ReactDOM.render(React.cloneElement(component, {visible: false}), div)
  ReactDOM.unmountComponentAtNode(div)
  div.remove()
 }
 const component = <>
      {title},{content}

          <Button onClick={handleClose} >
           知道了
          </Button>

      </>
 const div = document.createElement('div')
 document.body.append(div)
 ReactDOM.render(component, div)
}

在其他地方,导入 MessageBox, 像函数一样调用即可

2020-10-31 00:36:52