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

<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>
</div>

这样还是会发生下了拉框偏移，怀疑Select组件没有找到正确的父元素，所以默认为了body，于是我尝试换了一种写法

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

我将最外层的div换成了antd特有的Row组件，结果成功了，所以总结如下：

若要解决Select下拉框位置偏移问题，有两要素：

①添加getPopupContainer属性

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