Question

我有一个简单的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)))

我在网上找到了一些有关此问题的参考，但仍然不知道如何解决此问题。

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

谢谢

Answer 1

根据Material-ui changelog，应该在仍为Alpha的V5中解决该问题。

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

如果您想获得实验性主题创建者而不是删除React.StrictMode，则可以从以下位置更改其导入：

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

收件人

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

Answer 2

是的，这很烦人。 Material UI的团队跟不上React开发人员。现在，只需删除严格模式标签。不幸的是，尖端技术会发生什么。

Answer 3

这是Wikipedia

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

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

到

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

Answer 4

您是否尝试过使用React.forwardRef？ [MUI docs] [React docs]

const PersistentDrawer = React.forwardRef(
  (props, ref) => (
    <Drawer
      variant="persistent"
      anchor="left"
      open={props.open}
      ref={ref}
    />
  )
)

return (
  <div className={classes.root}>
    <AppBar position="static">
      <Toolbar>
        <IconButton
          aria-label="menu"
          className={classes.menuButton}
          color="inherit"
          edge="start"
          onClick={handleDrawerOpen}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          Online Information
        </Typography>
      </Toolbar>
    </AppBar>
    <PersistentDrawer open={open} />
  </div>
)

Answer 5

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

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

解决方案是创建一个引用并将其传递到您的根组件中。然后，手动将 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 6

更改主题配置

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

到

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

生成一个主题来减少 React.StrictMode 中的警告数量，例如警告：findDOMNode 在 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 7

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

React StrictMode 部分中引用了此错误：

<块引用>

关于已弃用的 findDOMNode 用法的警告

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

material-ui抽屉-StrictMode中不建议使用findDOMNode

7 个答案: