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

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

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

谢谢

score 240 · Accepted Answer

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

score 42 · Accepted Answer

这是严格模式警告

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

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

至

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

score 12 · Accepted Answer

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

score 3 · Accepted Answer

更改您的主题配置

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

score -1 · Accepted Answer

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

React StrictMode 部分引用了这个错误：

关于不推荐使用 findDOMNode 的警告

这是一个示例片段，指示如何解决该问题。看起来我们需要创建一个 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>;
  }
}

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

5 回答 5

更新

Related

Reference