react antd多层抽屉使用getContainer={false}，内层抽屉打开后，抽屉不在停靠在窗口的最边上，使用getContainer指定Drawer挂载的节点为外层抽屉的父容器

每一天，每一步

已于 2025-01-21 13:22:54 修改

阅读量626

点赞数 2

分类专栏： ant design - react 文章标签：前端 react.js 前端框架

于 2024-10-16 10:53:01 首次发布

本文链接：https://blog.youkuaiyun.com/u010234868/article/details/142974936

版权

ant design - react 专栏收录该内容

110 篇文章

订阅专栏

问题：react antd多层抽屉使用getContainer={false}，内层抽屉打开后，抽屉不在停靠在窗口的最边上，如下图所示：

解决办法：

指定内外层抽屉挂载的节点为外层抽屉的父容器。即设置getContainer={() => document.getElementById('parent-container')}

<div className={styles.main} id="parent-container">
    ……
    <Drawer 
        getContainer={() => document.getElementById('parent-container')} 
        ……
    />
    ……
</div>

如果上述添加完成后，发现内层抽屉位于外层抽屉的下一层，给内层Drawer添加zIndex={1001}，由于zIndex默认值为1000，内层抽屉的zIndex大于1000即可。