React中修复Modal弹窗内DatePicker日历溢出问题

这个坑我之前踩过！你遇到的问题是因为Ant Design的DatePicker默认会把日历面板挂载到document.body上，完全脱离了Modal的DOM层级，所以才会显示在弹窗外面。要让日历嵌在Modal内部，只需要调整DatePicker的getPopupContainer属性就行，具体做法如下：

核心解决方案 #

给DatePicker添加getPopupContainer属性，指定它的弹出面板挂载到Modal内部的元素上，这样就不会跳出Modal的范围了。最简单的方式是让它挂载到触发元素的父节点：

<DatePicker
  onChange={test}
  open={true}
  showNow={false}
  // 关键：指定弹窗容器为当前元素的父节点
  getPopupContainer={(triggerNode) => triggerNode.parentNode}
  dateRender={(current) => {
    const style = {};
    if (arr.includes(current)) {
      style.border = "1px solid red";
      style.borderRadius = "50%";
    }
    return (
      <div className="ant-picker-cell-inner" style={style}>
        {current.date()}
      </div>
    );
  }}
/>

如果你的Modal内部结构比较复杂，也可以给Modal的内容区域加一个ref，然后把getPopupContainer指向这个ref对应的元素，比如：

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const contentRef = useRef(null); // 新增ref

  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal 
        title="Basic Modal" 
        visible={isModalVisible} 
        onOk={handleOk} 
        onCancel={handleCancel}
      >
        {/* 给内容容器加ref */}
        <div ref={contentRef}>
          <DatePicker
            onChange={test}
            open={true}
            showNow={false}
            getPopupContainer={() => contentRef.current} // 指定到这个ref
            dateRender={(current) => {
              const style = {};
              if (arr.includes(current)) {
                style.border = "1px solid red";
                style.borderRadius = "50%";
              }
              return (
                <div className="ant-picker-cell-inner" style={style}>
                  {current.date()}
                </div>
              );
            }}
          />
        </div>
      </Modal>
    </>
  );
};

原理说明 #

getPopupContainer是Ant Design弹出类组件（比如DatePicker、Select等）的通用属性，用来指定弹出面板的挂载父元素。默认值是() => document.body，把面板挂到页面最外层，这样可以避免被父元素的overflow:hidden截断，但在Modal这种带遮罩的容器里就会出现跳出的问题。把它改成Modal内部的元素，面板就会被限制在Modal的范围内啦。

内容的提问来源于stack exchange，提问作者Asking