findDOMNode 在 StrictMode React 材质 UI 中已弃用

Question

I am getting this error on my React material UI project

By looking at the error I guess it comes somewhere inside the Drawer.js component. This is my full Drawer.js component

 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) );

I go through this error and some say this is a problem in MUI library and no way to fix this. But I believe there must be a workaround for this. This causes serious problems for UI.

Where this error comes from and what can I do to fix this?

Any help!

Thanks in advance. =)

I use material UI 4.11.0 and react 16

Answer 1

You only need to create a new childComponent with react.forwardRef passing respective props and refs:

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

In your render change the name of the original Child for the new:

<ChildComponent... />