项目中遇到了一个bug,就是使用antd的Modal组件时,出现只显示遮罩层,不显示内容的情况,查看页面上对应的html结构后,发现一个class="ant-modal-wrap" 的div被设置了一个行内样式,"display: none;"
首先我通过调试跟踪弹框显示的代码,无奈代码太多,跟不过来,放弃了,然后转而在网上搜索是否有人有同样的问题,发现在github上,有人提过issue
rc-dialog 中 forceRender 导致 .ant-modal-wrap display: none
这个问题在19 Aug 2020已经被修复
fix: dont't set display none when visible is true
果然,查看rc-dialog的源码,的确和提交前有问题的代码一样,那么就确定了问题的来源,这是antd某一次更新引入的bug,那么就很好解决了,只要将项目中的antd升级几个小版本就能解决,于是我将3.12.3升级到3.19.8,重新执行
npm i
然后测试弹框,bingo!问题解决了!
ps:最后我重新查看rc-dialog的源码,发现并没有像上面提交的fix这样修改
if (
(this.props.forceRender || (this.props.getContainer === false && !this.props.visible)) &&
- this.wrap
+ this.wrap && !this.prop.visible
) {
this.wrap.style.display = 'none';
}
怀疑是官方通过别的地方修复了这个bug,我就没有深入探究了。