material-ui 抽屜 - 在 StrictMode 中不推薦使用 findDOMNode

Question

我有一個簡單的 ReactJS 應用程序，它基於使用 StrictMode 的鈎子（無類）。

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

在 Appbar 中，我使用的是抽屜。

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

我在 web 上找到了一些關於此問題的參考，但仍然無法弄清楚如何解決此問題。

有人可以為這個問題添加一些解決方法嗎？

謝謝

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

我有一個簡單的 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)))

我在 web 上找到了一些關於此問題的參考，但仍然無法弄清楚如何解決此問題。

有人可以為這個問題添加一些解決方法嗎？

謝謝

Answer 3

這是一個StrictMode 警告

嚴格模式檢查僅在開發模式下運行； 它們不會影響生產構建。

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

到

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

Answer 4

此警告是由於 Transition 組件引起的，該組件用於許多 material-ui 組件，例如 Drawer、Tooltip、Snackbar 等。

就個人而言，我在所有這些警告中都遇到了這個警告，但只為 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 5

更改主題配置

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 6

在嘗試使用 React 材料 Select 組件進行選擇時，我遇到了同樣的錯誤。 我在 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>;
  }
}