material-ui Drawer - findDOMNode is deprecated in StrictMode

问题

I have a simple ReactJS app based on hooks (no classes) using StrictMode.

I am using React version 16.13.1 and Material-UI version 4.9.10.

In the Appbar I am using Drawer.

    <div className={classes.root}>
        <AppBar position="static">
            <Toolbar>
                <IconButton
                    edge="start"
                    className={classes.menuButton}
                    color="inherit"
                    aria-label="menu"
                    onClick={handleDrawerOpen}>
                    <MenuIcon />
                </IconButton>
                <Typography variant="h6" className={classes.title}>
                    Online Information
                </Typography>
            </Toolbar>
        </AppBar>
        <Drawer
            variant="persistent"
            anchor="left"
            open={open}
        ></Drawer>
    </div>

I notice that when I open the Drawer, I get the following warning.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance 
of 
Transition which is inside StrictMode. Instead, add a ref directly to the element you 
want to reference. Learn more about using refs safely ....
in div (created by Transition)
in Transition (created by ForwardRef(Fade))
in ForwardRef(Fade) (created by ForwardRef(Backdrop))
in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Drawer))
in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))

I found some reference on the web for this issue but still can’t figure out how to resolve this issue.

Can someone please add some workaround for this problem?

Thank you

回答1:

Yeah it's annoying. Material UI's team is not keeping up with the React devs. For now, just remove the Strict mode tag. It's unfortunately what happens with cutting edge technologies.

回答2:

I think problem with the StrictMode and production build its not there

also replace

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
  <React.Fragment>
    <App />
  </React.Fragment>,
  document.getElementById('root')
);

would be helpfull

回答3:

Have you tried using React.forwardRef? [React docs]

const PersistentDrawer = React.forwardRef(
  (props, ref) => (
    <Drawer
      variant="persistent"
      anchor="left"
      open={props.open}
      ref={ref}
    />
  )
)

return (
  <div className={classes.root}>
    <AppBar position="static">
      <Toolbar>
        <IconButton
          aria-label="menu"
          className={classes.menuButton}
          color="inherit"
          edge="start"
          onClick={handleDrawerOpen}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          Online Information
        </Typography>
      </Toolbar>
    </AppBar>
    <PersistentDrawer open={open} />
  </div>
)

来源：https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode

标签

reactjs

material-ui