material-ui Drawer - findDOMNode устарел в StrictMode

Ага, это раздражает. Команда Material UI не успевает за разработчиками React. А пока просто удалите тег строгого режима. К сожалению, именно это происходит с передовыми технологиями.

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

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

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

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

To

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

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

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

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

to

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

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

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

to

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

to

ReactDOM.render(
  <React.Fragment>
    <App />
  </React.Fragment>,
  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 <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;

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