相关疑难解决方法(0)

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

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

当我尝试创建处理此逻辑的组件UserMenu时,问题就开始了。我最后想要的是

    <Menu mode="horizontal">
      <Menu.Item key="home">
        <Link to={RoutesNames.HOMEPAGE}>Home</Link>
      </Menu.Item>
      <UserMenu user={this.props.currentUser}/>
    </Menu>
Run Code Online (Sandbox Code Playgroud)

我创建了子组件UserMenu。

首先我有这个错误:

    Uncaught TypeError: Cannot read property 'isRootMenu' of undefined
at ProxyComponent.render (SubMenu.js:274)
Run Code Online (Sandbox Code Playgroud)

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

   <SubMenu parentMenu={this.props.menu}
Run Code Online (Sandbox Code Playgroud)

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

   <Menu
     mode="horizontal"
     ref={el => this.menu = el}
   >
     <UserMenu menu={this.menu} user={this.props.currentUser} />
   </Menu>
Run Code Online (Sandbox Code Playgroud)

有了这个菜单道具,显示了子菜单,但是当鼠标悬停和将鼠标移出子菜单时,仍然出现错误 …

reactjs antd

2
推荐指数
1
解决办法
2266
查看次数

标签 统计

antd ×1

reactjs ×1