Не удалось создать SubMenu в компоненте с помощью antd

Question

Я использую 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>

Проблемы начинаются, когда я пытаюсь создать Component 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)

Для этого я абсолютно не знаю, что делать.

Спасибо за вашу помощь

Answer 1

Меню передает дополнительные реквизиты своим детям.Вы должны убедиться, что эти реквизиты передаются из компонента UserMenu в компонент SubMenu, который вы отображаете.Вы можете сделать это с помощью оператора распространения объекта.Пример:

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

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