[英]Dialog with Transition throwing JS warning “findDOMNode is deprecated in StrictMode”
I've created a simple Dialog component that is draggable and transitions in and out (with Grow) based on the example code here: https://material-ui.com/components/dialogs/#transitions (and scroll down for the draggable example)我创建了一个简单的 Dialog 组件,它是可拖动的,并且可以根据此处的示例代码进出(使用 Grow)过渡: https : //material-ui.com/components/dialogs/#transitions (向下滚动可拖动例子)
When I try to use this dialog, it works perfectly.当我尝试使用此对话框时,它运行良好。 However, the console gets several warnings every time:但是,控制台每次都会收到几个警告:
Here is my code:这是我的代码:
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>
);
}
}
How can I fix this?我怎样才能解决这个问题? It's not affecting my application's functionality, but I don't like errors/warnings in the console.它不会影响我的应用程序的功能,但我不喜欢控制台中的错误/警告。 And I thought I followed the instructions on the Material UI site, but if I did it correctly, would I be getting errors?我以为我是按照 Material UI 网站上的说明操作的,但如果我做对了,会不会出错?
The only way to remove the warning is to remove the strict mode in your application, there're a few material ui components that have the warning, there're some issues in their github page that have the same problem: https://github.com/mui-org/material-ui/issues/20561 , your easiest way to fix the problem is removing the strict mode, you can do this in your reactDOM render call:删除警告的唯一方法是删除应用程序中的严格模式,有一些材料 ui 组件有警告,他们的 github 页面中有一些问题也有同样的问题: https://github .com/mui-org/material-ui/issues/20561 ,解决问题的最简单方法是删除严格模式,您可以在 reactDOM 渲染调用中执行此操作:
ReactDOM.render(<App />, document.getElementById('root'))
This is best way to go until they fix the error.这是最好的方法,直到他们修复错误。
Btw strict mode is a mode that shows warnings on some potential issues that your app might have, for example using component lifecycle methods that are deprecated.顺便说一句,严格模式是一种模式,它显示您的应用程序可能存在的一些潜在问题的警告,例如使用已弃用的组件生命周期方法。 Here you can read more: https://reactjs.org/docs/strict-mode.html在这里你可以阅读更多: https : //reactjs.org/docs/strict-mode.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.