如何修复“findDOMNode 在 StrictMode 中已弃用”错误？

当我单击触发抽屉打开的按钮时，我在控制台中收到“findDOMNode is deprecated in StrictMode”

这是按钮组件容器，按钮组件名为Sidenav

import Sidenav from './Sidenav';


function Header() {
    return (
        <div className="header">
                    <div>
                        <Sidenav />
                    </div>
            </div>
        </div>
    );
}

export default Header;

这是 Sidenav 组件

import React, { useState } from 'react';
import clsx from 'clsx';

import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import MenuRoundedIcon from '@material-ui/icons/MenuRounded';

//sidenav width and styles
const useStyles = makeStyles({
    list: {
        width: 200
    },
    fullList: {
        width: 'auto'
    }
});

function Sidenav() {
    // Functionality for sidenav
    const classes = useStyles();
    const [ state, setState ] = useState({
        right: false
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    // Links go here
    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === 'top' || anchor === 'bottom'
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {/* {[ 'Inbox', 'Starred', 'Send email', 'Drafts' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
            {/* <Divider /> */}
            <List>
                {/* {[ 'All mail', 'Trash', 'Spam' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
        </div>
    );

    return (
        <div>
            <button onClick={toggleDrawer('right', true)}>
                <MenuRoundedIcon />
            </button>
            <Drawer anchor={'right'} open={state['right']} onClose={toggleDrawer('right', false)}>
                {list('right')}
            </Drawer>
        </div>
    );
}

export default Sidenav;

这是将 Sidenav 组件作为按钮单击时的控制台错误

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 here: 
    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)))
    in WithStyles(ForwardRef(Drawer)) (at Sidenav.js:69)
    in div (at Sidenav.js:65)
    in Sidenav (at Header.js:37)
    in div (at Header.js:36)
    in div (at Header.js:11)
    in div (at Header.js:10)
    in Header (at App.js:10)
    in div (at App.js:9)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

如何修复控制台错误？

错误来自material-ui's Transition成分。也许他们将来会修复它，但不用担心您不会在生产中看到这个错误。如果你不需要StrictMode你可以将其从中删除src/index.js.