使用antd在组件中创建子菜单失败 [英] Fail creating a SubMenu in a component with antd

查看:1063
本文介绍了使用antd在组件中创建子菜单失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用antd:^ 3.5.4

I'm using antd: ^3.5.4

我有一个菜单,其中包含用于用户管理的项目. 未登录时,菜单包含一个带有链接到登录页面的menuItem. 登录后,菜单具有一个带有多个链接的子菜单,包括注销

I have a menu that contains items for user management. When not logged the menu has a menuItem with a Link to Login page When logged in, the menu has a SubMenu with several links including Log out

我只是对连接的用户进行简单测试,以显示链接或子菜单. 当所有文件都在同一个文件中时,我工作得很好

I just make a simple test on my user connected to display the link or the submenu. I works well when all in the same file

    <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时,问题就开始了. 最后我想拥有的是

The problems begin when I try to create a Component UserMenu that handle this logic. What I want to have at the end is

    <Menu mode="horizontal">
      <Menu.Item key="home">
        <Link to={RoutesNames.HOMEPAGE}>Home</Link>
      </Menu.Item>
      <UserMenu user={this.props.currentUser}/>
    </Menu>

我创建了子组件UserMenu.

I create my sub component UserMenu.

首先,我遇到此错误:

    Uncaught TypeError: Cannot read property 'isRootMenu' of undefined
at ProxyComponent.render (SubMenu.js:274)

所以我更新了UserMenu组件以定义parentMenu

So I updated my UserMenu component to define parentMenu

   <SubMenu parentMenu={this.props.menu}

并在我的头文件中将父项设置为parentMenu

and set the parent as parentMenu in my header file

   <Menu
     mode="horizontal"
     ref={el => this.menu = el}
   >
     <UserMenu menu={this.menu} user={this.props.currentUser} />
   </Menu>

使用此菜单道具会显示subMenu,但是当鼠标悬停和鼠标移出子菜单时仍然出现错误

With this menu props the subMenu is showing but I still got an error when mouseover and mouseout the submenu

    Uncaught TypeError: onItemHover is not a function
at onTitleMouseEnter (SubMenu.js:454)

对于这个我绝对不知道该怎么办.

For this one I have absolutely no idea what to do.

感谢您的帮助

推荐答案

菜单将其他道具传递给孩子.您需要确保将这些道具从UserMenu组件传递到渲染的SubMenu组件.您可以使用对象传播运算符执行此操作.示例:

Menu passes additional props down to it's children. You need to make sure those props are passed down from your UserMenu component to the SubMenu component that you render. You can do this with an object spread operator. Example:

const UserMenu = (props) => {
     const {username, customProp, ...other} = props;

     return <SubMenu {...other}>
          This is my {customProp} for {username}
     </SubMenu>
}

这篇关于使用antd在组件中创建子菜单失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆