当我单击触发抽屉打开的按钮时,我在控制台中得到 '' 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
的Transition
零件。也许他们将来会修复它,但不用担心你不会在生产中看到这个错误。如果你不需要 StrictMode
您可以将其从 src/index.js
中删除.
关于javascript - 如何修复 '' findDOMNode is deprecated in StrictMode'' 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61937037/