在子组件中单击时关闭Popover

Question

我有一个组件，其中我渲染了一个Popover组件：

// HeaderMenu.tsx

const HeaderMenu = () => {
  const ShowMenu = () => {
    return (
      <div className={classes.profile}>
        <ul>
          <Notifications />
        </ul>
        <ul>
          <li onClick={handleClose}><Link to={`/profile/${currentUserVar().id}`}>Profile</Link></li>
          <li onClick={handleClose}><Link to='/' onClick={logout}>Logout</Link></li>
        </ul>
      </div>
    );
  };

  return (
    <div>
      <Button onClick={handleClick}>
        <AccountCircleIcon className={classes.profileIcon} />
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <ShowMenu />
      </Popover>
    </div>
  );
};

我可以在ShowMenu函数中使用onClick={handleClose}，但我还有一个嵌套组件：通知。在这个组件中，我呈现了一个带有一些链接的列表：

// Notifications.tsx

<Link to={`/profile/${notification.followedUser.id}`}>{notification.followedUser.user_name}</Link>{' '}

如果单击了通知组件中的链接，我将如何调用标题菜单组件中的handleClose函数来关闭弹出窗口？

我可以使用反应变量触发通知组件的更改（如果单击了链接），并通过调用handleClose函数对HeaderMenu组件中的更改做出反应。但我希望有更好的办法。有什么建议吗？

Answer 1

在您的通知组件中添加一个onDemestClopprop：

function Notifications({ onRequestClose }) {
  return <div onClick={onRequestClose}>Notifications</div>;
}

const ShowMenu = ({ onRequestClose }) => {
  const classes = makeStyles();

  return (
    <div className={classes.profile}>
      <ul>
        <Notifications onRequestClose={onRequestClose} />
      </ul>
      <ul>
        <li onClick={onRequestClose}>
          <Link to={`/profile/1`}>Profile</Link>
        </li>
        <li onClick={onRequestClose}>
          <Link to="/" onClick={() => {}}>
            Logout
          </Link>
        </li>
      </ul>
    </div>
  );
};

在父组件中，按如下方式传递回调：

const classes = makeStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;

const handleClick = (event) => {
  setAnchorEl(event.currentTarget);
};

const handleClose = () => {
  setAnchorEl(null);
};

return (
  <div>
    <Button onClick={handleClick}>
      <AccountCircleIcon className={classes.profileIcon} />
    </Button>
    <Popover
      id={id}
      open={open}
      anchorEl={anchorEl}
      onClose={handleClose}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "left"
      }}
    >
      <ShowMenu onRequestClose={handleClose} />
    </Popover>
  </div>
);