React Material UI 对话框失败的 prop 类型值为“未定义”

Question

发帖已是我束手无策。我不是开发人员，这只是一个家庭项目。

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

现在，我采用了 Material UI 中的示例

材质 UI 对话框

和演示

材质 UI 对话框演示

并自己实现了一个副本：

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 调试工具，他们说对话框定义了“open”属性。

所以我很茫然:(

有人能指点一下发生了什么事吗？我猜我有一个愚蠢的错误，但我找不到它。

Answer 1

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

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

应该是

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

谢谢好心人的解答。

Answer 2

open={open || fasle}

我这样做并修复了！