material ui Drawer-findDOMNode在StrictMode中已弃用

根据材料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 ). 如果升级是您的选择,它也应该解决这个问题。

这是一个 StrictMode Warning

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

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

到

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

此警告是由于许多材质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;

更改主题配置

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