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

问题描述

我正在使用 antd:^3.5.4

I'm using antd: ^3.5.4

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

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>

有了这个菜单道具，子菜单正在显示，但当鼠标悬停和鼠标移出子菜单时我仍然收到错误

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.

感谢您的帮助

推荐答案

Menu 将额外的 props 传递给它的子级.您需要确保这些道具从您的 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屋！