如何修复 ReactforwardRef(Menu) Material UI？

我创建了非常简单的自定义组件MuiMenu and MuiMenuItem。但是当我尝试显示这些组件时，我看到一个错误，如下所示：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(Menu)`.

但如果我直接从@material-ui/core- 一切都很好。我该如何解决？

工作示例：https://codesandbox.io/s/sharp-shadow-bt404?file=/src/App.js https://codesandbox.io/s/sharp-shadow-bt404?file=/src/App.js

正如错误所示，Material-UI 正在使用 ForwardRef，您需要将其包含在代码中。以下是对 MuiMenu 和 MuiMenuItem 组件的修复；

MuiMenu

import React from "react";
import Menu from "@material-ui/core/Menu";


const MuiMenu = React.forwardRef((props, ref) => {
  return <Menu  ref={ref} {...props} />;
});

export default MuiMenu;

多菜单项

import React from "react";
import MenuItem from "@material-ui/core/MenuItem";

const MuiMenuItem = React.forwardRef((props, ref) => {
  return <MenuItem  ref={ref} {...props} />;
});

export default MuiMenuItem;

您在索引处使用的严格模式也有错误，所以我将其删除。

Index.JS

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

这是固定沙箱的链接：https://codesandbox.io/s/hopeful-thunder-u6m2k https://codesandbox.io/s/hopeful-thunder-u6m2k

这里还有其他链接可以帮助您了解更多：https://material-ui.com/getting-started/faq/#how-do-i-use-react-router https://material-ui.com/getting-started/faq/#how-do-i-use-react-router | https://reactjs.org/docs/react-api.html#reactforwardref https://reactjs.org/docs/react-api.html#reactforwardref