react+antd Select下拉框位置随页面偏移

2021-04-19 1,709 阅读1分钟

<Select style={{width: 200}} getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
</Select>

根据官方Api，若位置发生偏移，添加getPopupContainer属性，使其依附于其父节点，默认是body

实际开发中发现，有些情况下还是存在找不到父节点的情况：


<div>
    <span>
        <Select  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
            ...
        </Select>
    </span>

怀疑Select组件没有找到正确的父元素，所以默认为了body，于是我尝试换了一种写法

<Row>
    <span>
        <Select  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
            ...
        </Select>
    </span>
</Row>

我将最外层的div换成了antd特有的Row组件，结果成功了

总结如下：

解决Select下拉框位置偏移问题需要注意两点：

1、添加getPopupContainer属性

2、最外层元素要是antd组件，不能是平常的div,span等元素

解决办法二

<div id='antdSelect'>
    <span>
        <Select  getPopupContainer={triggerNode => document.getElementById('antdSelect')}>
            ...
        </Select>
    </span>