打算用反应写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。
核心在于使用反应的接口<代码>反应。createPortal(元素,domContainer)> 元素渲染后的DOM节点嵌入<代码> domContainer> document.body>
所以,我们可以这样写一个对话框或模态框:
一个新的<代码> div> 身体内部:
一个完整演示:
类模态扩展反应。组件{
呈现(){
const {
可见,
比;
内容
& lt; br/比;
& lt;按钮onClick={onClose}祝辞Close
& lt;/div>
& lt;/StyledModalRoot> document.body)
}
}
类应用延伸反应。组件{
状态={
visibleModal:假
}
showModal=()=比;这一点。设置状态({visibleModal:真})
handleCloseModal=()=比;这一点。设置状态({visibleModal:假})
呈现(){
const {visibleModal}=this.state
返回& lt; div风格={{填充:20 px的}}祝辞
& lt;按钮onClick={。showModal}祝辞显示Modal
& lt;模态可见={visibleModal} onClose={。handleCloseModal}/比;
& lt;/div>
}
}
const StyledModalRoot=styled.div '
位置:固定;
z - index: 1001;
左:0;
上图:0;
显示:网格;
名:中心;
宽度:100%;
高度:100%;
背景:rgba (0, 0, 0, 0.2);
祝辞。盒子{
位置:相对;
显示:网格;
名:中心;
宽度:80%;
高度:80%;
背景:白色;
border - radius: 10 px;
不必:0 px 3 px 5 px 1 px rgba (0, 0, 0, 0.2), 0 px 5 px 8 px 0 px rgba (0, 0, 0, 0.14), 0 px 1 px 14 px 0 px rgba (0, 0, 0, 0.12);
}
'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
