我正在使用 antd:^3.5.4
我有一个包含用户管理项目的菜单。
未登录时,菜单有一个带有登录页面链接的菜单项
登录后,菜单有一个子菜单,其中包含多个链接,包括注销
我只是对连接的用户进行简单的测试以显示链接或子菜单。
当所有内容都在同一个文件中时我工作得很好
<Menu mode="horizontal">
<Menu.Item key="home">
<Link to={RoutesNames.HOMEPAGE}>Home</Link>
</Menu.Item>
{this.props.currentUserIsSignedIn ? (
<SubMenu key="usermenu" title={<Avatar>A</Avatar>}>
<Menu.Item key="info">{this.props.currentUserEmail}</Menu.Item>
<Menu.Item key="logout">
<Link onClick={this.props.signOutUser}>Log out</Link>
</Menu.Item>
</SubMenu>
) : (
<Menu.Item key="login">
<Link to={RoutesNames.LOGIN}>Signin / Register</Link>
</Menu.Item>
)}
</Menu>
当我尝试创建处理此逻辑的组件 UserMenu 时,问题就开始了。
我最后想要的是
<Menu mode="horizontal">
<Menu.Item key="home">
<Link to={RoutesNames.HOMEPAGE}>Home</Link>
</Menu.Item>
<UserMenu user={this.props.currentUser}/>
</Menu>
我创建了我的子组件 UserMenu。
首先我有这个错误:
Uncaught TypeError: Cannot read property 'isRootMenu' of undefined
at ProxyComponent.render (SubMenu.js:274)
所以我更新了我的 UserMenu 组件来定义parentMenu
<SubMenu parentMenu={this.props.menu}
并在我的头文件中将父项设置为parentMenu
<Menu
mode="horizontal"
ref={el => this.menu = el}
>
<UserMenu menu={this.menu} user={this.props.currentUser} />
</Menu>
使用此菜单道具,子菜单会显示,但当鼠标悬停和鼠标移出子菜单时,我仍然收到错误
Uncaught TypeError: onItemHover is not a function
at onTitleMouseEnter (SubMenu.js:454)
对于这个我完全不知道该怎么办。
感谢您的帮助