У меня есть простое приложение ReactJS, основанное на хуках (без классов) с использованием StrictMode.

Я использую React версии 16.13.1 и Material-UI версии 4.9.10.

На панели приложений я использую Drawer.

    
Online Information

Я замечаю, что когда открываю ящик, я получаю следующее предупреждение.

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

Я нашел в Интернете ссылку на эту проблему, но до сих пор не могу понять, как ее решить.

Может кто-нибудь добавить обходной путь для этой проблемы?

Спасибо

Ответы (5)

Я столкнулся с той же ошибкой при попытке сделать выбор с помощью компонента 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 
{this.props.children}
; } }

Согласно Material-ui changelog, это должно быть решено в V5, который все еще находится в альфа-версии.

Кажется, что по крайней мере в некоторых случаях эту проблему вызывает createMuiTheme. Решить эту проблему можно с помощью экспериментального (нестабильного) создателя тем

Если вы хотите получить экспериментальный создатель темы вместо удаления React.StrictMode, вы можете изменить его импорт из:

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

Кому

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

ОБНОВЛЕНИЕ

V5 официально отсутствует (и теперь называется MUI). Если вам подходит обновление, оно должно решить и эту проблему.

изменить конфигурацию темы

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(
  
    
  ,
  document.getElementById('root')
);
От

до

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Это предупреждение StrictMode

Проверки в строгом режиме выполняются только в режиме разработки; они не влияют на производственную сборку.

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
От

до

ReactDOM.render(
    ,
  document.getElementById('root')
);

Это предупреждение связано с компонентом Transition, который используется во многих компонентах пользовательского интерфейса материалов, таких как Drawer, Tooltip, Snackbar и т. Д.

Лично я встречал это предупреждение во всех из них, но исправил это только для компонента Snackbar.

Решение состоит в том, чтобы создать ссылку и передать ее в корневой компонент. Затем вручную перенаправьте ссылку своим дочерним компонентам, которые используют переход.

Вот код для компонента 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 ;
});

const SlideTransition = React.forwardRef((props, ref) => {
    return ;
});

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 (
        
{alertMessage}
); }; export default SnackAlert;

2022 WebDevInsider