Не удалось создать подменю в компоненте с помощью 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>

Проблемы начинаются, когда я пытаюсь создать компонентное меню пользователя, которое обрабатывает эту логику. Что я хочу в конце, так это

    <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
person ARNAUD COSSON -CAMPUS-    schedule 28.05.2018    source источник

Ответы (1)


arrow_upward
22
arrow_downward

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

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

     return <SubMenu {...other}>
          This is my {customProp} for {username}
     </SubMenu>
}
person Eddy Borja    schedule 09.07.2018