带有转换的对话框抛出 JS 警告“在 StrictMode 中不推荐使用 findDOMNode”

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

删除警告的唯一方法是在您的应用程序中删除严格模式，有一些材质的 ui 组件有警告，在他们的 github 页面中有一些问题有同样的问题：@987654321 @，您解决问题的最简单方法是删除严格模式，您可以在您的 reactDOM 渲染调用中执行此操作：

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

这是在他们修复错误之前最好的方法。

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