React Material UI Dialog Failed 道具类型值为“未定义”

如何解决React Material UI Dialog Failed 道具类型值为“未定义”

在我的脑子里发帖。我不是开发人员，这只是一个家庭项目。

我试图构建一个可重用的对话框（它只是询问“你确定吗？”），但一直出现错误。

现在，我以 Material UI 为例

Material UI Dialog

和演示

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;

除了更改文本之外，我看不出有什么不同，但在打开对话框时出现以下错误（并且按钮不呈现）：

警告：道具类型失败：道具 open 在 ForwardRef(Dialog) 中被标记为必需，但其值为 undefined。

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

我检查了 React 调试工具，他们说 Dialog 有一个定义为“打开”的道具。

所以我不知所措:(

有没有人知道发生了什么？我的猜测是我有一个愚蠢的错误，但我找不到。

解决方法

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

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

应该

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

感谢回答问题的好心人。