时间戳

首页 > 解决方案 > 有没有办法使用作为我的过渡组件，同时使用组件来显示菜单 onHover？

reactjs - 有没有办法使用作为我的过渡组件，同时使用组件来显示菜单 onHover？

问题描述

以下问题是关于 React 和 Material-UI 的：

我在显示我的onMouseEnter时尝试使用<Collapse>转换组件。但是，Material-UI 库中的组件和/组件<Menu>的方式似乎存在问题。该问题目前是开放的，可以在这里看到。<Collapse><Popper><Popover>

有没有人找到一个很好的解决方法？基本上，我只是希望当您将鼠标悬停在具有此特定转换的链接上时会出现一个子导航菜单。

我已经尝试使用该<Grow>组件并且过渡效果很好，但我们特别尝试使用<Collapse>过渡。

export const NavBarItem = ({ navItem }) => {
  const classes = useStyles();

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

  function handleToggle() {
    setOpen(prevOpen => !prevOpen);
  }

  function handleClose(event) {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  }

  return (
    <React.Fragment>
      <Link className={classes.link} href={BASE_HOMEPAGE + navItem.path}>
        <Typography
          className={classes.title}
          ref={anchorRef}
          aria-controls="menu-list-grow"
          aria-haspopup="true"
          onMouseEnter={handleToggle}
          onMouseLeave={handleToggle}
        >
          {navItem.title}
        </Typography>
      </Link>
      <Popper
        open={open}
        anchorEl={anchorRef.current}
        onMouseEnter={handleToggle}
        onMouseLeave={handleToggle}
        transition
        disablePortal
        placement="bottom-start"
      >
        <Collapse in={open}>
            <Paper id="menu-list-grow">
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList className={classes.paperMenu}>
                  {navItem.menuItems.map(item => (
                    <Link
                      className={classes.link}
                      href={
                        item.external ? item.path : BASE_HOMEPAGE + item.path
                      }
                    >
                      <MenuItem
                        className={classes.paperMenuItem}
                        onClick={handleClose}
                      >
                        {item.text}
                      </MenuItem>
                    </Link>
                  ))}
                </MenuList>
              </ClickAwayListener>
            </Paper>
            </Collapse>
      </Popper>
    </React.Fragment>
  );
};

上面显示的代码适用于 NavComponent 中的特定 NavItem。它本质上只是一个下拉组件，当您将鼠标悬停在特定链接上时显示子导航。

感谢您的帮助，如果您需要更多信息，请告诉我。

标签： reactjsmaterial-ui

解决方案

您可以尝试使用道具时TransitionProps给出的，如文档中所示Poppertransition

<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps} timeout={350}>
      <div className={classes.paper}>The content of the Popper.</div>
    </Fade>
  )}
</Popper>

对于更流畅的 UI，您还可以使用以下keepMounted属性Popper：

<Popper id={id} open={open} anchorEl={anchorEl} transition keepMounted>

推荐阅读