findDOMNode 在 StrictMode React 材质 UI 中已弃用答案

【问题标题】：findDOMNode is deprecated in StrictMode React material UIfindDOMNode 在 StrictMode React 材质 UI 中已弃用
【发布时间】：2021-02-26 01:06:55
【问题描述】：

我的 React Material UI 项目出现此错误

通过查看错误，我猜它出现在 Drawer.js 组件内部的某个地方。这是我完整的Drawer.js 组件

import React, { Fragment, useState } from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import { List, Collapse } from "@material-ui/core";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import IconButton from "@material-ui/core/IconButton";
import ListItemText from "@material-ui/core/ListItemText";
import { toggleDrawer } from "../../store/actions/authActions";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
// import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import { useHistory } from 'react-router-dom';
import { connect } from "react-redux";

import { withRouter } from "react-router";

const useStyles = makeStyles({
  list: {
    width: 250,
  },
  fullList: {
    width: "auto",
  },
});

function TemporaryDrawer(props) {
  const classes = useStyles();
  const theme = useTheme();
  // const [open, setOpen] = React.useState(false);
  const [openIndex, setOpenIndex] = useState(0);

  let history = useHistory();

  // const handleDrawerOpen = () => {
  //   setOpen(true);
  // };

  const handleDrawerClose = () => {
    props.toggleDrawer();
  };

  const handleClick = (index) => {
    if (openIndex === index) {
      setOpenIndex(-1);
    } else {
      setOpenIndex(index);
    }
  };

  const onToggle = () => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    props.toggleDrawer();
  };

  const onRoute = (path) => {
    // props.history.push(path);
    history.push(path);

    props.toggleDrawer();
  };

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]: anchor === "top" || anchor === "bottom",
      })}
      role="presentation"
    >
      <div className={classes.drawerHeader}>
        <IconButton onClick={handleDrawerClose}>
          {theme.direction === "ltr" ? (
            <ChevronLeftIcon />
          ) : (
            <ChevronRightIcon />
          )}
        </IconButton>
      </div>
      <Divider />

      <List>
        {props.permissions.map((route, index) => (
          <Fragment key={index}>
            <ListItem button onClick={(e) => handleClick(index)}>
              <ListItemText primary={route.name} />
              {index === openIndex ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            {route.children.length && (
              <Collapse
                in={openIndex === index ? true : false}
                timeout="auto"
                unmountOnExit
              >
                <List component="div" disablePadding>
                  {route.children.map((child, idx) => (
                    <ListItem
                      button
                      className={classes.nested}
                      key={idx}
                      onClick={() => onRoute(child.path)}
                    >
                      <ListItemText primary={child.name} />
                    </ListItem>
                  ))}
                </List>
                <Divider />
              </Collapse>
            )}
          </Fragment>
        ))}
      </List>
      {/* <Divider /> */}
    </div>
  );

  return (
    <div>
      {props.token && (
        <Drawer
          anchor="left"
          open={props.isDrawerOpen}
          onClose={onToggle("left", false)}
          variant="persistent"
        >
          {list("left")}
        </Drawer>
      )}
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isDrawerOpen: state.auth.isDrawerOpen,
    token: state.auth.token,
    permissions: state.auth.routes,
  };
};

export default withRouter(
  connect(mapStateToProps, { toggleDrawer })(TemporaryDrawer)
);

我遇到了这个错误，有人说这是MUI 库中的一个问题，没有办法解决这个问题。但我相信必须有一个解决方法。这会导致 UI 出现严重问题。

这个错误来自哪里，我可以做些什么来解决这个问题？

任何帮助！

提前致谢。 =)

我使用材质 UI 4.11.0 并做出反应16

【问题讨论】：

只需在您的index.jsx 中删除<StrictMode />
这能回答你的问题吗？ material-ui Drawer - findDOMNode is deprecated in StrictMode
顺便说一句，这是一个警告，而不是错误......解决方法是（1）忽略警告并继续，（2）打开一个问题并希望他们解决它，（3 ) fork 项目 repo，自己修复并打开 PR，希望它得到批准和合并，(4) 找到不同的抽屉组件。
这个问题还没有解决

标签： javascript reactjs

【解决方案1】：

你只需要创建一个新的 childComponent 并使用 react.forwardRef 传递各自的 props 和 refs：

const ChildComponent = React.forwardRef((props, ref) =>
  <div ref={ref}>
    <yourChildcomponent {...props} />
  </div>
);

在您的渲染中将原来的 Child 的名称更改为新的：

<ChildComponent... />

【讨论】：