Question

我遇到了Antd子菜单的问题。如果我使用下面的代码，子菜单会在悬停时打开，但如果鼠标没有完全悬停在第一个项目中的链接，它将再次关闭。

知道我能做些什么吗？我使用的是v3.0.0-beta.5

这是一个屏幕录制：

https://www.dropbox.com/s/jdxakivocf5atgs/antd-submenu-bug.mov?dl=0

也许它只是测试版中的一个错误，但是向antd repo提交问题需要付出很多努力，并且甚至不会在他们的app和fork样板中包含3.0。

import React from 'react';
import { Link } from 'react-router-dom';
import { Menu, Avatar } from 'antd';
const { SubMenu, Item, Divider } = Menu;
import styled from 'styled-components';

const Box = styled.span`
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
`;

interface INavigationProps {
  onLogout: () => any;
  isAuthed: boolean;
  avatar?: string;
}

export const Navigation: React.SFC<INavigationProps> = ({
  isAuthed,
  onLogout,
  avatar,
}) =>
  isAuthed && (
    <Menu mode="horizontal" style={{ lineHeight: '64px' }}>
      <Item key="admin">
        <Link to="/admin">admin</Link>
      </Item>
      <SubMenu
        key="user"
        mode="inline"
        title={
          <Box>
            <Avatar src={avatar} icon="user" />
          </Box>
        }
      >
        <Item key="user.profile">
          <Link to="/profile">profile</Link>
        </Item>
        <Divider />
        <Item key="user.logout">
          <Link to="/" onClick={onLogout}>
            logout
          </Link>
        </Item>
      </SubMenu>
    </Menu>
  );

export default Navigation;

Answer 1

此问题已在升级后消失（现为测试版6）

Antd Menu.SubMenu在悬停时不断折叠

1 个答案: