React Material UI 抽屉 - 滑动过渡不起作用

Question

我为我的 React 应用程序写了一个抽屉

const Sidebar = () => {
    return (
      <Drawer
        open={burgerModalOpen}
        onClose={() => setBurgerModalOpen(false)}
      >
        <Box>
          <Navigator />
        </Box>
      </Drawer>
    );
  };

const [burgerModalOpen, setBurgerModalOpen] = React.useState(false);

return (
      <>
        <MobileSideBarContainer>
          <BurgerIconContainer onClick={_handleOpenMobileBurger}>
            <div>
              <BurgerIcon />
            </div>
          </BurgerIconContainer>
          <Sidebar />
        </MobileSideBarContainer>
      </>
    );
  }

抽屉只是“出现”和“消失”......它不像它那样滑入这里

我该如何解决这个问题？

Answer 1

侧边栏返回抽屉对象。最有可能在每个新渲染上都会创建一个新的抽屉对象。因此，内部参考存在一些问题。你可以尝试使用变量 -

const drawer = (
    <Drawer open={burgerModalOpen} onClose={() => setBurgerModalOpen(false)}>
      <Box>
        <Navigator />
      </Box>
    </Drawer>
  );

const Sidebar = () => {
    return drawer;
  };

Answer 2

在我的例子中，我已将 Drawler 组件设置为条件，当我删除条件时，它起作用了。