material-ui Drawer - findDOMNode 在 StrictMode 中已弃用

Question

我有一个使用 StrictMode 的基于钩子（无类）的简单 ReactJS 应用程序。

我正在使用 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)))

我在网上找到了有关此问题的一些参考资料，但仍然无法弄清楚如何解决此问题。

有人可以为这个问题添加一些解决方法吗？

谢谢

Answer 1

根据Material-ui changelog，应该是在V5中解决了，还在alpha中。

似乎至少在某些情况下这个问题是由createMuiTheme 引起的。您可以使用实验性（不稳定）主题创建器解决此问题

如果您想获取实验主题创建者而不是删除React.StrictMode，您可以更改它的导入来源：

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

到

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

更新

V5 正式发布（现在称为MUI）。如果您可以选择升级 - 它也应该可以解决这个问题。

Answer 2

这是StrictMode Warning

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

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

到

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

Answer 3

此警告是由于在许多 Material-ui 组件（如 Drawer、Tooltip、Snackbar 等）中使用的 Transition 组件造成的。

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

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

这里是 Snackbar 组件的代码，它为我解决了这个问题。由于这只是一个警告，可能会忽略它。您不需要删除 StrictMode。它将在未来的 material-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;

Answer 4

更改您的主题配置

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

到

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

生成一个主题来减少 React.StrictMode 中的警告数量，例如 Warning: findDOMNode is deprecated in StrictMode。

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

用于生产用途 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')
);

Answer 5

我在尝试使用 React 材质选择组件进行选择时遇到了同样的错误。我在 React 文档中找到了这个页面，该页面讨论了严格模式并引用了这个特定的错误。

React StrictMode 此错误在以下部分中引用：

关于不推荐使用 findDOMNode 的警告

这里是一个示例 sn-p，指示如何解决问题。看起来我们需要创建一个 React Ref，然后将该 ref 附加到引发错误的 DOM 节点。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return <div ref={this.wrapper}>{this.props.children}</div>;
  }
}