優化Ant Design 下拉框伴頁面滾動

在項目中使用antd的form組件，當一屏顯示不完存在滾動條時，滑動滾動條會出現form中的下拉框伴隨頁面滾動的情況。通過重新綁定下拉框對應的父級定位元素，可優化這樣的現象。

一、封裝通用方法

export const scrollSelectFormUtils = (id: string) => {
  //獲取當前元素
  const getPopupContainer: RenderDOMFunc = () => {
    return document.getElementById(id) as HTMLElement
  }
  //定位當前元素
  const scrollSelectFormProps: {
    id: string
    style: {
      // declare position css type
      position:
        | 'inherit'
        | 'initial'
        | 'revert'
        | 'unset'
        | '-webkit-sticky'
        | 'absolute'
        | 'fixed'
        | 'relative'
        | 'static'
        | 'sticky'
        | undefined
    }
  } = {
    id,
    style: {
      position: 'relative',
    },
  }
  return {
    getPopupContainer,
    scrollSelectFormProps,
  }
}

二、頁面引入使用

import { scrollSelectFormUtils } from '****' //引入
//獲取定義
const { getPopupContainer, scrollSelectFormProps } = scrollSelectFormUtils(
  'abnormal-list'
)
//綁定form
<Form layout='inline' form={form} {...scrollSelectFormProps}>
 //綁定select
 <Select getPopupContainer={getPopupContainer}>

 </Select>

</Form>

PS:有其他優化方法，請留言 一起分享。