Question

当我单击触发抽屉打开的按钮时，在控制台中出现“ findDOMNode在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)

如何解决控制台错误？

Answer 1

错误来自material-ui的{{1}}组件。也许他们会在将来修复它，但不用担心您不会在生产中看到此错误。即使您不需要Transition，也可以将其从StrictMode中删除。

如何解决“在StrictMode中弃用了findDOMNode”错误？

1 个答案: