问题描述:

在使用react antd Table 时,用了 表格自带的过滤属性(columns.filters)和 Table 的 scroll属性 时 页面会报错,导致页面空白。

antd 3.x

报错信息:

Cannot read property ‘appendChild’ of null at getContainer

报错截图如下:

antdvuemodal超出宽度只在内部滚动_前端框架


复现步骤:

使用Table 加了scroll

antdvuemodal超出宽度只在内部滚动_react.js_02


columns: 加了filters

antdvuemodal超出宽度只在内部滚动_react.js_03

解决方案:

解决步骤:

1.一开始 我都没定位到是表格的问题,最后用 注释法发现是表格的问题。于是我看了数据,和配置项都没问题。我就尝试注释表格的属性,当把scroll注释掉后竟然不报错了。

2.但是我的表格很长 不加滚动条不行,所以接着找原因,尝试把 columns里的filter注释掉(一个一个注释才发现的)。发现竟然也不报错了。

3.于是总结出了这两个 属性 互斥(即使 scroll x,y为 0只要写了scroll就会报错)

原因: 从报错信息来看,一开始我以为是我 代码里用到了appendChild于是我全局搜素了一下,代码里并没用到这个属性,所以排除了不是自己代码里的错误 。

于是 我点进去 (报错一般后面会写 哪个文件,多少行,控制台里可以直接点进该文件里)发现是 antd 内部代码报错。

是一个 getContainer里的错误。

antdvuemodal超出宽度只在内部滚动_前端_04

方案1. “Make sure default popup container will never cause scrollbar appearing”(确保默认弹出容器不会导致出现滚动条)

mountNode.appendChild 这里的错误 ,mountNode为null了所以它的appendChild也为null 所以我尝试加了个 getPopupContainer属性就不报错了!issues41

antdvuemodal超出宽度只在内部滚动_解决方案_05


代码如下:

这个root 可以是其他的dom元素,这要这个元素 是 没有滚动条即可。

可以是table的父元素,也可以是页面根元素 我写的就是根元素 #root(这个可以根据你自己项目里的调 理论上用 ref获取的dom也行)

getPopupContainer={() => document.getElementById('root')} />

方案二:升级antd 版本

似乎高版本不存在这个问题。至少我在 4.x ,5.x试了一下没这个问题。

antdvuemodal超出宽度只在内部滚动_解决方案_06


其实这个 getPopupContainer 还可以用来解决 弹出位置不准确,比如 下拉框的父组件有个滚动调 滚动时 下拉选择可能保持不动 。但input 往上走了就会出现 选择框和 input 分开了 。

antd Select Dropdown DatePicker TimePicker Popover Popconfirm 会跟随滚动条上下移动?

getPopupContainer={trigger => trigger.parentElement}

并且保证 parentElement 是 position: relative 或 position: absolute

总结:

要善于 使用GitHub 里的issues ,当使用第三方库时有了解决不了的bug不妨取这个里面找找。