【React】select和DatePicker组件不跟随页面滚动

【React】解决antd中，select和DatePicker组件不跟随页面滚动的问题

在开发过程中，经常会使用到Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离，如下图所示

解决方法
antd的官方API给我们提供了getPopupContainer属性，该属性是菜单渲染的父节点，默认是body。只要添加该属性，设置好父节点，就可以解决这种分离。

// triggerNode：当前元素的节点
// triggerNode.parentNode：最近的父级元素节点

// 1、在Select组件中：
添加“getPopupContainer={triggerNode => triggerNode.parentNode}” ，使其固定在父元素中

// 2、在日期DatePicker组件中：
使用 “getCalendarContainer={triggerNode => triggerNode.parentNode}”

设置完之后在antd3.x是正常的，antd版本是4.x的DatePicker和Cascader可能还是会分离。
我们可以先打印一下这三个组件的triggerNode以及triggerNode.parentNode进行对比观察。这时就能发现这三个组件的triggerNode.parentNode存在差异，DatePicker和Cascader直接找到了最外层的div，他的节点还是在最外层，导致分离。
解决方法
我可以直接把定位定到本身节点上，就可以解决该问题

getPopupContainer={triggerNode => triggerNode}

效果如图所示