reactjs - findDOMNode 在 StrictMode 中已弃用。findDOMNode 被传递了一个 Transition 的实例（由 MUI Backdrop 创建），它位于 StrictMode 内部

Question

我收到以下警告：

警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。相反，直接将 ref 添加到要引用的元素。在此处了解有关安全使用 refs 的更多信息：

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)) (at CircularProgressOverlay.tsx:20)
in CircularProgress (at VpmsSpinnerMat.tsx:7)
in VpmsSpinner (at ProductCreate.tsx:19)
in div (at ProductCreate.tsx:18)
in ProductCreate (created by Context.Consumer)
in Route (at ProductMain.tsx:36)
in Switch (at ProductMain.tsx:34)
in Router (created by HashRouter)
in HashRouter (at ProductMain.tsx:33)
in Provider (at ProductMain.tsx:32)
in ProductMain (at App.tsx:9)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Box.tsx:32)
in Box (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)

这是组件：

import React from "react";
import './spinner.css';
import {Backdrop, Theme} from "@material-ui/core";
import {createStyles, makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        backdrop: {
            zIndex: theme.zIndex.drawer + 1,
            color: '#fff',
        },
    }),
);

export default function CircularProgress(props: any) {
    const classes = useStyles();
    const wrapper= React.createRef();

    return (
        <Backdrop className={classes.backdrop} open={true} ref={wrapper}>
            <div className="lds-dual-ring"/>
        </Backdrop>
    )
}

findDOMNode是由 MUI 中的 Transition.js（由 Backdrop 创建）引起的。有没有办法在不禁用 StrictMode 的情况下删除警告？我试过了ref={wrapper}，但没有效果。

标签： reactjstypescriptmaterial-ui

Answer 1

我应用了这个解决方案：

import React from "react";
import './spinner.css';
import {Backdrop, Theme} from "@material-ui/core";
import {createStyles, makeStyles, unstable_createMuiStrictModeTheme, ThemeProvider} from "@material-ui/core/styles";

// FIXME. To be fixed in future versions of MUI. Not advised for use in Production: https://material-ui.com/customization/theming/
const theme = unstable_createMuiStrictModeTheme();

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        backdrop: {
            zIndex: theme.zIndex.drawer + 1,
            color: '#fff',
        },
    }),
);

export default function CircularProgress(props: any) {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <Backdrop className={classes.backdrop} open={true}>
                <div className="lds-dual-ring"/>
            </Backdrop>
        </ThemeProvider>
    )
}