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

【问题标题】：What does this mean? Warning: findDOMNode is deprecated in StrictMode这是什么意思？警告：在 StrictMode 中不推荐使用 findDOMNode
【发布时间】：2021-04-08 17:40:03
【问题描述】：

我正在尝试将函数用作组件内的道具，并且该组件是另一个组件的子组件。该功能有效，但它给了我一个警告。我能知道为什么吗。这是我在控制台中收到的警告。 警告：在 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>
  )
}

【问题讨论】：

很遗憾你不能，这是因为材质ui，你不用担心。

标签： javascript reactjs warnings

【解决方案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

【讨论】：