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

【问题标题】：How do I use Menu with Collapse as my TransitionComponent on Material-ui?如何在 Material-ui 上使用带有 Collapse 的 Menu 作为我的 TransitionComponent？
【发布时间】：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);

【问题讨论】：

标签： reactjs menu material-ui transition collapse

【解决方案1】：

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

【讨论】：

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