React Material UI Dialog Failed道具类型值为' undefined '

Question

无计可施。我不是开发人员，这只是一个家庭项目。

我试图建立一个可重用的对话框(只问"你确定吗?")，并不断得到错误。

现在，我已经从材质UI

中获取了示例材质UI对话框

和演示

Material UI Dialog Demo

并自己实现了一个副本:

DialogTest.js

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function DialogTest() {
const [open, setOpen] = React.useState(false);

const handleClickOpen = () => {
setOpen(true);
};

const handleClose = () => {
setOpen(false);
};
return (
<div>
<h2>Dialog</h2>
<div>
<button onClick={handleClickOpen}>Open Dialog</button>
</div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Boom</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Blah
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
import React from 'react';
import DialogTest from './DialogTest';

App.js:

function App() {
return (
<DialogTest/>
);
}
export default App;

除了改变文本，我看不出有什么不同，但是当打开对话框(按钮不呈现)时，我得到以下错误:

Warning: Failed prop type:open在ForwardRef(Dialog)中标记为需要的prop，但其值为undefined

我在实现可重用的解决方案时出现了这个错误，这就是为什么我将其剥离回上面的代码。

我检查了React调试工具，他们说Dialog有一个prop 'open'定义。

所以我很茫然:(

有没有人有一个指针，什么是正在发生的?我猜我有一个愚蠢的错误，但我找不到它。

Answer 1

这确实是我的错误-我在顶部的import不正确。

import Button from '@material-ui/core/Dialog';

应该

import Button from '@material-ui/core/Button;

感谢回复你的人。