代码之家 › 专栏 › 技术社区 › angus

material ui Drawer-findDOMNode在StrictMode中已弃用

material-ui reactjs

angus · 技术社区 · 4 年前

我有一个基于钩子(没有类)的简单ReactJS应用程序,它使用StrictMode。

我使用的是React 16.13.1版本和Material UI 4.9.10版本。

在Appbar中,我正在使用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>

我注意到,当我打开抽屉时,我收到了以下警告。

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

我在网上找到了一些关于这个问题的参考,但仍然不知道如何解决这个问题。

有人能为这个问题添加一些解决方法吗?

非常感谢。

0 回复 | 直到 4 年前

250

yuval.bl 3 年前

根据材料ui changelog ,它应该在V5中解决,V5仍处于alpha阶段。

似乎至少在某些情况下,这个问题是由 createMuiTheme 。您可以通过使用实验性(不稳定)主题创建器来解决此问题

如果你想获得实验主题创建者而不是删除 React.StrictMode ,您可以更改其导入来源:

import { createMuiTheme } from '@material-ui/core';

致

import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';

更新

V5正式发布(现在称为 MUI ). 如果升级是您的选择,它也应该解决这个问题。

Zach 4 年前

这是一个 StrictMode Warning

严格的模式检查仅在开发模式下运行;它们不会影响生产建设。

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

到

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

Animesh Jain 3 年前

此警告是由于许多材质ui组件(如Drawer、Tooltip、Snackbar等)中使用的Transition组件造成的。

就我个人而言,我在所有这些组件中都遇到了这个警告,但只修复了Snackbar组件的问题。

解决方案是创建一个ref并将其传递到根组件中。然后,手动将引用转发给使用Transition的子组件。

这是Snackbar组件的代码,它为我修复了这个问题。因为这只是一个警告,可能忽略它。你不需要删除StrictMode。它将在未来的材料ui版本中得到修复。

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

//MUI Stuff
import { makeStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

// Redux
import { hideAlert } from '../../redux/actions/uiActions';
import Slide from '@material-ui/core/Slide';

const Alert = React.forwardRef((props, ref) => {
    return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
});

const SlideTransition = React.forwardRef((props, ref) => {
    return <Slide ref={ref} {...props} direction="left" />;
});

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    snackbar: {
        [theme.breakpoints.down('sm')]: {
            bottom: 65,
        },
    },
}));

const SnackAlert = () => {
    const snackbarRef = React.createRef(null);
    const classes = useStyles();
    const { alert, alertType, alertMessage } = useSelector((state) => ({
        alert: state.ui.alert,
        alertType: state.ui.alertType,
        alertMessage: state.ui.alertMessage,
    }));
    const dispatch = useDispatch();
    const [open, setOpen] = React.useState(false);

    useEffect(() => {
        setOpen(alert);
    }, [alert]);

    const handleClose = () => {
        setOpen(false);
        dispatch(hideAlert());
    };

    return (
        <div className={classes.root}>
            <Snackbar
                ref={snackbarRef}
                className={classes.snackbar}
                open={open}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                autoHideDuration={5000}
                onClose={handleClose}
                message={alertMessage}
                TransitionComponent={SlideTransition}
            >
                <Alert onClose={handleClose} severity={alertType}>
                    {alertMessage}
                </Alert>
            </Snackbar>
        </div>
    );
};
export default SnackAlert;

SaimumIslam27 3 年前

更改主题配置

import { createMuiTheme } from '@material-ui/core';

到

import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';

生成一个主题,减少React中的警告数量。类似StrictMode的警告:在StrictMode中,findDOMNode已被弃用。

警告:请勿在生产中使用此方法。

用于生产用途 import { createMuiTheme } from '@material-ui/core'; 并将StrictMode替换为Fragment。

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

到

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