Question

以下问题与React和Material-UI有关：

我在显示<Collapse> onMouseEnter时尝试使用<Menu>过渡组件。但是，当涉及<Collapse>组件和<Popper> / <Popover>组件的方式时，Material-UI库中似乎存在一个问题。该问题目前尚未解决，可以here看到。

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

我尝试使用<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。当您将鼠标悬停在特定链接上时，它实际上只是一个下拉列表组件，用于显示子导航。

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

Answer 1

在使用TransitionProps道具时，您可以尝试使用Popper给定的transition，如documentation

所示

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

要使界面更流畅，您还可以在keepMounted中使用Popper属性：

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

有一种方法可以在使用<Popper>组件在悬停菜单上显示菜单时，将<Collapse>用作我的Transition组件？

1 个答案: