Есть ли способ использовать <Collapse>в качестве моего компонента Transition при использовании компонента <Popper>для отображения меню при наведении курсора? - PullRequest
Новая
       9

Есть ли способ использовать <Collapse>в качестве моего компонента Transition при использовании компонента <Popper>для отображения меню при наведении курсора?

0 голосов
/ 11 июля 2019

Следующий вопрос касается React и Material-UI:

Я пытаюсь использовать компонент перехода <Collapse> при отображении моего <Menu> onMouseEnter.Однако в библиотеке Material-UI возникает проблема, связанная с компонентом <Collapse> и компонентом <Popper> / <Popover>.В настоящее время проблема открыта и ее можно увидеть здесь .

Кто-нибудь нашел для этого хороший обходной путь?По сути, я просто надеюсь, что появится меню 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>
  );
};

Код, показанный выше, предназначен для определенного NavItem в NavComponent.По сути, это просто выпадающий компонент, показывающий субнав, когда вы наводите указатель мыши на определенную ссылку.

Спасибо за вашу помощь и, пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

...