material-ui Drawer - 在 StrictMode 中不推荐使用 findDOMNode [英] material-ui Drawer - findDOMNode is deprecated in StrictMode

问题描述

我有一个使用 StrictMode 的基于钩子(无类)的简单 ReactJS 应用程序.

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

在 Appbar 中，我正在使用 Drawer.

 
<AppBar position="static"><工具栏><图标按钮边缘=开始"className={classes.menuButton}颜色=继承"咏叹调标签=菜单"onClick={handleDrawerOpen}><菜单图标/></图标按钮><Typography variant="h6" className={classes.title}>在线信息</排版></工具栏></AppBar><抽屉变体=持久"锚=左"打开={打开}></抽屉>

我注意到当我打开抽屉时，我收到以下警告.

警告:在 StrictMode 中不推荐使用 findDOMNode.findDOMNode 被传递了一个实例的StrictMode 内的转换.相反，直接向您的元素添加一个引用想参考.了解有关安全使用 refs 的更多信息....在 div(由 Transition 创建)在转换中(由 ForwardRef(Fade) 创建)在 ForwardRef(Fade)(由 ForwardRef(Backdrop) 创建)在 ForwardRef(Backdrop) 中(由 WithStyles(ForwardRef(Backdrop)) 创建)在 WithStyles(ForwardRef(Backdrop)) (由 ForwardRef(Modal) 创建)在 div(由 ForwardRef(Modal) 创建)在 ForwardRef(Portal) 中(由 ForwardRef(Modal) 创建)在 ForwardRef(Modal) 中(由 ForwardRef(Drawer) 创建)在 ForwardRef(Drawer)(由 WithStyles(ForwardRef(Drawer)) 创建)

我在网上找到了有关此问题的一些参考资料，但仍然不知道如何解决此问题.

有人可以为这个问题添加一些解决方法吗?

谢谢

解决方案

根据 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).如果您可以选择升级 - 它也应该可以解决这个问题.

I have a simple ReactJS app based on hooks (no classes) using StrictMode.

I am using React version 16.13.1 and Material-UI version 4.9.10.

In the Appbar I am using 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>

I notice that when I open the Drawer, I get the following warning.

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

I found some reference on the web for this issue but still can’t figure out how to resolve this issue.

Can someone please add some workaround for this problem?

Thank you

解决方案

According to Material-ui changelog, it should be solve in V5, which is still in alpha.

It seems that at least in some cases this issue cause by createMuiTheme. You can solve this issue by using the experimental (unstable) theme creator

If you want to get the experimental theme creator instead of removing React.StrictMode, you can change it's import from:

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

To

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

UPDATE

V5 is officially out (and now called MUI). If upgrading is an option for you - it should solve this issue as well.

这篇关于material-ui Drawer - 在 StrictMode 中不推荐使用 findDOMNode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！