material-ui Drawer - findDOMNode 在 StrictMode 中已弃用

Question

我有一个使用 StrictMode 的基于钩子（无类）的简单 ReactJS 应用程序。

我正在使用 React 版本 16.13.1 和 Material-UI 版本 4.9.10。

在 Appbar 中，我使用的是 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)))

我在网上找到了有关此问题的一些参考资料，但仍然无法弄清楚如何解决此问题。

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

谢谢

原文由 angus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 yuval.bl 发布，翻译遵循 CC BY-SA 4.0 许可协议