从 Header 父组件打开 Material-UI 对话框模式

Question

我有一个标题组件与注册对话框模式组件分开。所以就像父子组件一样。我想从 headerlink 组件（父）调用注册对话框（子）

这是我的标题链接组件：

...

import Register from "../Register";

....

export default function HeaderLinks(props) {

  const classes = useStyles();

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {

    setOpen(true);

  };

  const handleClose = () => {

    setOpen(false);

  };

  return (

    <List className={classes.list}>

      <ListItem className={classes.listItem}>

        <Button

          color="transparent"

          className={classes.navLink}

          onClick={handleClickOpen}

        >

          Register

        </Button>

      </ListItem>

      <ListItem className={classes.listItem}>

        <Button

          color="transparent"

          className={classes.navLink}

          

        >

          Log In

        </Button>

      </ListItem>

    </List>

  );

  <Register open={handleClickOpen} onClose={handleClose} />;

}

注册对话框组件只是从 Material-UI 的文档中复制并删除了按钮。

export default function Register() {

  const [open, setOpen] = React.useState(false);

  const classes = useStyles();

  const theme = useTheme();

  const handleClickOpen = () => {

    setOpen(true);

  };

  const handleClose = () => {

    setOpen(false);

  };

  return (

    <div>

      <Dialog

        onClose={handleClose}

        aria-labelledby="customized-dialog-title"

        open={open}

      >

        <DialogTitle id="customized-dialog-title" onClose={handleClose}>

          Register

        </DialogTitle>

        <DialogContent dividers>

         ...content...

        </DialogContent>

      </Dialog>

    </div>

  );

}

当我单击 headerLink 上的注册按钮时，没有任何反应。不确定我还缺少什么，因为没有错误。

Answer 1

在您的 上HeaderLinks，您已经在函数上返回了一个值，因此下面的其余源代码将不会执行。return (&nbsp; <List className={classes.list}>&nbsp; &nbsp; ...&nbsp; </List>);<Register open={handleClickOpen} onClose={handleClose} />; // <-- code will not be reached所以只需将它移到 return 语句中并在单个标签上关闭它们，因为相邻的 JSX 元素必须包含在封闭标签中。将道具传递给它Register，它不需要内部状态，因为它的道具（根据您的设计看来）是由组件open控制的HeaderLinksexport default function HeaderLinks() {&nbsp; const classes = useStyles();&nbsp; const [open, setOpen] = React.useState(false);&nbsp; &nbsp;&nbsp;&nbsp; const handleClickOpen = () => {&nbsp; &nbsp; setOpen(true);&nbsp; };&nbsp; const handleClose = () => {&nbsp; &nbsp; setOpen(false);&nbsp; };&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <List className={classes.list}>&nbsp; &nbsp; &nbsp; &nbsp; <ListItem className={classes.listItem}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="transparent"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.navLink}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={handleClickOpen}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Register&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; </ListItem>&nbsp; &nbsp; &nbsp; &nbsp; <ListItem className={classes.listItem}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button color="transparent" className={classes.navLink}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Log In&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; </ListItem>&nbsp; &nbsp; &nbsp; </List>&nbsp; &nbsp; &nbsp; <Register open={open} handleClose={handleClose} />&nbsp; &nbsp; </>&nbsp; );}function Register({ open, handleClose }) {&nbsp; const classes = useStyles();&nbsp; const theme = useTheme();&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Dialog&nbsp; &nbsp; &nbsp; &nbsp; onClose={handleClose}&nbsp; &nbsp; &nbsp; &nbsp; aria-labelledby="customized-dialog-title"&nbsp; &nbsp; &nbsp; &nbsp; open={open}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <DialogTitle id="customized-dialog-title" onClose={handleClose}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Register&nbsp; &nbsp; &nbsp; &nbsp; </DialogTitle>&nbsp; &nbsp; &nbsp; &nbsp; <DialogContent dividers>...content...</DialogContent>&nbsp; &nbsp; &nbsp; </Dialog>&nbsp; &nbsp; </div>&nbsp; );}