从 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 (

  <List className={classes.list}>

    ...

  </List>

);

<Register open={handleClickOpen} onClose={handleClose} />; // <-- code will not be reached

所以只需将它移到 return 语句中并在单个标签上关闭它们，因为相邻的 JSX 元素必须包含在封闭标签中。将道具传递给它Register，它不需要内部状态，因为它的道具（根据您的设计看来）是由组件open控制的HeaderLinks

export default function HeaderLinks() {

  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={open} handleClose={handleClose} />

    </>

  );

}

function Register({ open, handleClose }) {

  const classes = useStyles();

  const theme = useTheme();

  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>

  );

}