reactjs - 带有 Transition 的对话框抛出 JS 警告 "findDOMNode is deprecated in StrictMode"

Question

我创建了一个简单的 Dialog 组件，它是可拖动的，并根据此处的示例代码进出(使用 Grow)过渡:
https://material-ui.com/components/dialogs/#transitions (向下滚动查看可拖动示例)
当我尝试使用此对话框时，它运行良好。但是，控制台每次都会收到几个警告:

这是我的代码:

    const Transition = React.forwardRef(function Transition(props, ref) {
        return <Grow ref={ref} {...props} />;
    });

    export class PaperComponent extends React.Component {
        render() {
            return (
                <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
                    <Paper {...this.props} />
                </Draggable>
            );
        }
    }

    export class BasicDialog extends React.Component {
        render() {
            return (
                <Dialog
                    open={this.props.dialogData.title ?? false}
                    PaperComponent={PaperComponent}
                    TransitionComponent={Transition}>
                    <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
                        {this.props.dialogData.title}
                    </DialogTitle>
                    <DialogContent style={{ textAlign: 'center' }}>
                        <DialogContentText>
                            {this.props.dialogData.text}
                        </DialogContentText>
                        {this.props.dialogData.content}
                    </DialogContent>
                    <DialogActions style={{ justifyContent: 'center' }}>
                        <ButtonGroup color="primary">
                            <Button onClick={() => this.props.onComplete()}>OK</Button>
                        </ButtonGroup>
                    </DialogActions>
                </Dialog>
            );
        }
    }

我怎样才能解决这个问题？它不会影响我的应用程序的功能，但我不喜欢控制台中的错误/警告。我以为我是按照 Material UI 网站上的说明操作的，但如果我做对了，会不会出错？

Answer 1

删除警告的唯一方法是删除应用程序中的严格模式，有一些 Material ui 组件有警告，他们的 github 页面中有一些问题也有同样的问题:https://github.com/mui-org/material-ui/issues/20561 ，解决问题的最简单方法是删除严格模式，您可以在 reactDOM 渲染调用中执行此操作:

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

这是最好的方法，直到他们修复错误。
顺便说一句，严格模式是一种模式，它显示您的应用程序可能存在的一些潜在问题的警告，例如使用已弃用的组件生命周期方法。在这里你可以阅读更多: https://reactjs.org/docs/strict-mode.html