带有 Transition 的对话框抛出 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 页面中存在一些存在相同问题的问题：https://github .com/mui-org/material-ui/issues/20561，解决问题的最简单方法是删除严格模式，您可以在reactDOM渲染调用中执行此操作：

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

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

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