使用 antd 在组件中创建子菜单失败答案

【问题标题】：Fail creating a SubMenu in a component with antd使用 antd 在组件中创建子菜单失败
【发布时间】：2018-07-10 01:29:15
【问题描述】：

我正在使用 antd：^3.5.4

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

我只是对连接的用户进行了一个简单的测试，以显示链接或子菜单。我在同一个文件中工作得很好

    <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)

对于这个我完全不知道该怎么做。

感谢您的帮助

【问题讨论】：

标签： reactjs antd

【解决方案1】：

菜单将额外的道具传递给它的孩子。您需要确保将这些道具从您的 UserMenu 组件传递到您呈现的 SubMenu 组件。您可以使用对象扩展运算符来执行此操作。示例：

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

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

【讨论】：