如何修复 React forwardRef(Menu) Material UI？答案

【问题标题】：How to fix React forwardRef(Menu) Material UI?如何修复 React forwardRef(Menu) Material UI？
【发布时间】：2020-07-16 13:11:25
【问题描述】：

我创建了非常简单的自定义组件MuiMenu 和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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

正如错误所说，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;

MuiMenuItem

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://material-ui.com/getting-started/faq/#how-do-i-use-react-router | https://reactjs.org/docs/react-api.html#reactforwardref

【讨论】：