【Ant Design】Select組件下拉選項隨頁面滾動與Select框分離異常

背景：

使用Ant Design，在Modal組件中使用Select組件，當點擊Select組件出現下拉選項後滾動原始頁面，出現下拉選項和Select框分離的異常。

異常：

問題點：

Select組件有個API getPopupContainer，Ant Design官方文檔給出的用途解釋爲：“菜單渲染父節點。默認渲染到 body 上，如果你遇到菜單滾動定位問題，試試修改爲滾動的區域，並相對其定位”。同時官網也強調一個特殊情況需要注意：“如果發現下拉菜單跟隨頁面滾動，或者需要在其他彈層中觸發 Select，請嘗試使用 getPopupContainer={triggerNode => triggerNode.parentNode} 將下拉彈層渲染節點固定在觸發器的父元素中”。

解決方案：

在Select組件中添加:getPopupContainer="triggerNode => triggerNode.parentNode”屬性即可。