Antd Design 中 Drawer 组件如何设置渲染在自定义的 dom 或者 div中，而不是全局 body

最近有一个关于聊天监控的项目，有一个需求是展示聊天消息的上下文，我想使用抽屉组件Drawer实现功能，采用antd design。

想法是点击查看上下文按钮，弹出一个抽屉组件，这个抽屉的出现区域为该界面写好的div中，而不是整个界面的body。

了解了很久，得出结论：

首先：设置一个属性getContainer，这个是Drawer组件的属性，设置为false，getContainer属性允许我们指定组件应该渲染到哪个容器上，具体含义可以自己查询。

其次：在该抽屉的父级容器设置样式为position: relative，也就是将你所要把抽屉组件自定义到的那个div中的style设置为position: relative。

最后：抽屉组件本身设置一个定位 position: absolute。

这样就实现了抽屉组件的自定义位置设置。以下是实现代码，使用Ant Design 中的代码做了点修改。

import { Button, Drawer } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  return (
    <div style{{ position: relative, overflow: hidden;}}>
      Render in this
      <div style={{ marginTop: 16 }}>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
      </div>
      <Drawer
        title="Basic Drawer"
        placement="right"
        closable={false}
        onClose={onClose}
        open={open}
        getContainer={false}
        style={{ position: 'absolute' }}
      >
        <p>Some contents...</p>
      </Drawer>
    </div>
  );
};

export default App;