使用反应手写一个对话框或模态框的方法示例

打算用反应写对话框已经很长一段时间，现在是时候兑现承诺了。实际上，写起来相当简单。

核心在于使用反应的接口React.createPortal(元素，domContainer)。该接口将元素渲染后的数字正射影像图节点嵌入domContainer(通常是document.body)，并保证只嵌入一次。

所以，我们可以这样写一个对话框或模态框：

函数Dialog(){ return react。创建门户(对话框内容/div，document.body )}一个新的差异会出现在身体内部：

一个完整DEMO:

点击运行演示

类情态的扩展了做出反应.组件{ render() { const { visible，onClose }=this.props返回可见的反应DOM。create portal(StyledModalRoot div类名=' box ' Content br/button onClick={ onClose } Close/button/div/StyledModalRoot，文档。正文)} }类应用扩展了做出反应.组件{ state={ visibleModal : false } Show Modal=()=this。设置状态({ visibleModal : true })handleCloseModal=()=this。设置状态({ visiblemodel : false })render(){ const { visiblemodel }=this。状态返回div style={ { padd : ' 20px ' } }按钮onClick={ this.showModal }显示模式/按钮模式可见={ visibleModal } OnLose={ this。handleCloseModal } .z指数： 1001；左： 0；top : 0；显示器：网格；放置-物品：中心；宽度： 100%;高度： 100%;background: rgba(0，0，0，0.2)；盒子{位置：相对；显示器：网格；放置-物品：中心；宽度： 80%;高度： 80%;背景：白色；边框半径： 10px盒影： 0px 3px 5px-1px rgba(0，0，0，0.2)，0px 5px 8px 0px rgba(0，0，0，0.14)，0px 1px 14px 0px rgba(0，0，0，0.12)；}`以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。