如何在 Material-ui 上使用带有 Collapse 的 Menu 作为我的 TransitionComponent？

Posted 2023-03-24

【中文标题】如何在 Material-ui 上使用带有 Collapse 的 Menu 作为我的 TransitionComponent？

【英文标题】：How do I use Menu with Collapse as my TransitionComponent on Material-ui?

【发布时间】：2019-08-19 15:59:37

【问题描述】：

我在使用 Collapse 组件作为 Material-UI 上的 TransitionComponent 时遇到问题。

不仅不行，还会断锚。

Fade 工作正常，不知道在哪里寻找答案。

提前致谢。

Link to codesandbox

import React,  useState, useRef  from "react";
import ReactDOM from "react-dom";
import  Menu, MenuItem, Collapse, Fade, Typography  from "@material-ui/core";

function App() 
  const [open, toggle] = useState(false);
  const ref = useRef(null);

  return (
    <>
      <div style= position: "absolute", top: "50%"  ref=ref>
        <Typography variant="h4" className="App" onClick=() => toggle(true)>
          Click me!
        </Typography>
      </div>
      <Menu
        TransitionComponent=Collapse
        anchorEl=ref.current
        open=open
        onClose=() => toggle(false)
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
      <Menu
        TransitionComponent=Fade
        transitionDuration=800
        anchorEl=ref.current
        open=open
        onClose=() => toggle(false)
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
    </>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【参考方案1】：

这是Collapse 转换与Popover 组件（由Menu 使用）组合的已知错误：https://github.com/mui-org/material-ui/issues/11337

【讨论】：

谢谢，我会听从这个建议的。这个问题对我来说有点重要。我尝试自己寻找相关的东西但没有成功。谢谢你的帮助。干杯。