MUI 5.6.0 SwipeableDrawer阻止关闭后无法恢复原尺寸求助

方案1：临时切换open状态触发恢复动画 #

当不符合关闭逻辑时，短暂切换open状态触发组件的过渡动画，让抽屉自动回到初始位置，无需操作DOM：

const [open, setOpen] = useState(false);

const handleClose = (event, reason) => {
  if (logic) {
    setOpen(false);
  } else {
    // 临时切换状态触发恢复动画
    setOpen(false);
    requestAnimationFrame(() => {
      setOpen(true);
    });
  }
};

return (
  <SwipeableDrawer
    anchor="bottom"
    open={open}
    onClose={handleClose}
    onOpen={() => setOpen(true)}
  >
    {/* 抽屉内容 */}
  </SwipeableDrawer>
);

方案2：调用组件内部滑动重置方法（适配MUI 5.6.0） #

通过useRef获取抽屉实例，调用其内部的滑动状态重置方法，直接恢复抽屉位置：

import { useRef, useState } from 'react';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';

const [open, setOpen] = useState(false);
const drawerRef = useRef(null);

const handleClose = (event, reason) => {
  if (logic) {
    setOpen(false);
  } else {
    // 调用内部方法重置滑动状态
    drawerRef.current?._swipeable?.reset();
  }
};

return (
  <SwipeableDrawer
    ref={drawerRef}
    anchor="bottom"
    open={open}
    onClose={handleClose}
    onOpen={() => setOpen(true)}
  >
    {/* 抽屉内容 */}
  </SwipeableDrawer>
);

方案3：手动重置DOM样式（兜底方案） #

如果前两种方法无效，可直接操作抽屉的DOM元素，强制重置位置样式：

import { useRef, useState } from 'react';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';

const [open, setOpen] = useState(false);
const drawerRef = useRef(null);

const handleClose = (event, reason) => {
  if (logic) {
    setOpen(false);
  } else {
    // 针对bottom锚点，手动重置抽屉位置
    const paperElement = drawerRef.current?.querySelector('.MuiDrawer-paper');
    if (paperElement) {
      paperElement.style.transform = 'translateY(0)';
      // 临时移除过渡避免突兀，随后恢复
      paperElement.style.transition = 'none';
      requestAnimationFrame(() => {
        paperElement.style.transition = '';
      });
    }
  }
};

return (
  <SwipeableDrawer
    ref={drawerRef}
    anchor="bottom"
    open={open}
    onClose={handleClose}
    onOpen={() => setOpen(true)}
  >
    {/* 抽屉内容 */}
  </SwipeableDrawer>
);

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