使用Select组件,当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离的异常。
原因
ant所有的弹框都是默认挂载在body下面,然后绝对定位的。所以滚动body内容, 就会造成与弹出触发的那个组件错位。
解决
ant所有的弹框都是默认挂载在body下面,然后绝对定位的。所以滚动body内容, 就会造成与弹出触发的那个组件错位。使用getPopupContainer属性。可以让下拉内容挂载任何存在的dom节点上,并相对其定(所以也可以获取到dom节点来为其定位)
文档里面说的也很清楚
<Select
getPopupContainer={triggerNode => triggerNode.parentElement}
>
</Select>
TreeSelect组件也是这个属性
注意DatePicker不一样
<DatePicker
getCalendarContainer={trigger => trigger.parentNode}
/>