material-ui 드로어 - findDOMName은 Strict Mode에서 사용되지 않습니다.

material-ui 드로어 - findDOMName은 Strict Mode에서 사용되지 않습니다.

Strict Mode를 사용한 후크(클래스 없음) 기반의 심플한 React JS 앱이 있습니다.

React 버전 16.13.1과 Material-UI 버전 4.9.10을 사용하고 있습니다.

앱바에서 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)))

웹에서 이 문제에 대한 참조를 찾았지만 여전히 이 문제를 해결할 방법을 찾을 수 없습니다.

이 문제에 대한 해결 방법을 추가해 주실 수 있습니까?

감사해요.

Material-ui changelog에 따르면 V5에서 해결되어야 하며, V5는 아직 알파에 있습니다.

적어도 경우에 따라서는 이 문제가 다음 원인으로 발생하는 것 같습니다.createMuiTheme실험적인(불안정적인) 테마 크리에이터를 사용하면 이 문제를 해결할 수 있습니다.

제거하지 않고 실험 테마 생성기를 가져오려면React.StrictModeImport처 변경 가능:

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

로.

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

갱신하다

V5는 공식적으로 출시되었습니다(현재는 MUI로 불리고 있습니다.업그레이드가 필요한 경우 이 문제도 해결됩니다.

이것은 Strict Mode 경고입니다.

엄격한 모드 검사는 개발 모드에서만 수행되며 프로덕션 빌드에는 영향을 주지 않습니다.

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

로.

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

이 경고는 Drawer, Tooltip, 스낵바 등과 같은 많은 재료-ui 컴포넌트에 사용되는 Transition 컴포넌트 때문입니다.

개인적으로, 나는 모든 경고에 직면했지만, 스낵바 컴포넌트에 대해서만 이 경고를 수정했습니다.

해결책은 ref를 생성하여 루트 컴포넌트에 전달하는 것입니다.그런 다음 Transition을 사용하는 하위 구성요소로 ref를 수동으로 전달합니다.

여기 스낵바 컴포넌트의 코드가 있습니다.이 코드는 문제를 해결한 것입니다.그냥 경고일 뿐이니까 무시하세요.Strict Mode는 삭제할 필요가 없습니다.향후 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;

테마 구성 변경

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

로.

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

React 내부의 경고 양을 줄이는 테마를 생성합니다.경고와 같은 Strict Mode: findDOMName은 Strict Mode에서 더 이상 사용되지 않습니다.

경고: 프로덕션에서 이 방법을 사용하지 마십시오.

실가동import { createMuiTheme } from '@material-ui/core';Strict Mode를 fragment로 바꿉니다.

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

로.

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

언급URL : https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode