这是什么意思？ 警告：在 StrictMode 中不推荐使用 findDOMNode

Question

我正在尝试使用 function 作为组件内的道具，并且该组件是另一个组件的子组件。 function 有效，但它给了我一个警告。 我能知道为什么吗。 这是我在控制台中收到的警告。 警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。 相反，直接将 ref 添加到要引用的元素。 我可以在不删除严格模式的情况下删除警告吗？ 这是我的代码。

 import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles'; import { Button, IconButton, Menu, MenuItem } from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; import ListItemText from '@material-ui/core/ListItemText'; import { Link } from 'react-router-dom'; const StyledMenu = withStyles({ paper: { border: '1px solid #d3d4d5', }, })((props) => ( <Menu elevation={0} getContentAnchorEl={null} anchorOrigin={{ vertical: 'bottom', horizontal: 'center', }} transformOrigin={{ vertical: 'top', horizontal: 'center', }} {...props} /> )); const StyledMenuItem = withStyles((theme) => ({ root: { '&:focus': { backgroundColor: theme.palette.primary.main, '&.MuiListItemIcon-root, &.MuiListItemText-primary': { color: theme.palette.common.white, }, }, }, }))(MenuItem); const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, menuButton: { marginRight: theme.spacing(2), }, title: { flexGrow: 1, }, Link: { textDecoration: 'none', color: 'black', } })); export const MenuBox = () => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return ( <div className="menus"> <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleClick}> <MenuIcon /> </IconButton> <StyledMenu id="customized-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose} > <Link to="/" className={classes.Link}> <StyledMenuItem> <ListItemText> Home </ListItemText> </StyledMenuItem> </Link> <Link to="about" className={classes.Link}> <StyledMenuItem> <ListItemText> About </ListItemText> </StyledMenuItem> </Link> <Link to="products" className={classes.Link}> <StyledMenuItem> <ListItemText> Products </ListItemText> </StyledMenuItem> </Link> </StyledMenu> </div> ) }

Answer 1

有关该问题的讨论，您可以在此处找到它们#13394和此处#2345来修复此错误，您需要删除严格模式或升级到 alpha 版本5.0.0-alpha.21 @material-ui/core

yarn add @material-ui/core@next

在这里，我尝试使用新版本来实现您的代码，这给了我依赖关系的不同，我不得不手动安装它们，你可以在这里看到

https://codesandbox.io/s/objective-morse-crnm1?file=/src/index.js