Antd SubMenu «Ошибка типа: невозможно прочитать свойство isRootMenu неопределенного»

Я столкнулся с той же проблемой. Кажется, Antd не позволяет размещать произвольные компоненты в Menu/SubMenu. Я предполагаю, что Menu.Item нужно получить некоторые реквизиты, которые передаются от Menu/SubMenu его дочерним элементам.

Так что можно либо создать кастомный компонент, который передает все пропсы вниз, либо удалить внутреннюю <React.Fragment> декларацию (тот, что внутри SubMenu), который все равно не нужен.

Я смог заставить его работать, поместив компонент <Query> вверху:

<Query query = {FLOORS_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <Spin />;
            if (error) console.info(error);
            console.info(data);
            return (
              <Menu theme = "light" defaultSelectedKeys = {['1']} mode = "inline">
                {data.getAllFloors.map((floor) => (
                  <SubMenu
                    key = {floor.id}
                    title = {
                      <Link to = "/{floor.id}">
                        <span>
                          <Icon type = "plus" />
                          <span>{floor.floorName}</span>
                        </span>
                      </Link>
                    }
                  >
                    {floor.rooms.map((room) => (
                      <Menu.Item key = {room.id} onClick = {this.showRoomProfile}>
                        {room.roomNumber}
                      </Menu.Item>
                    ))}
                  </SubMenu>
                ))}
              </Menu>
            );
          }}
        </Query>

У меня возникла эта проблема при попытке добавить <div> в качестве дочернего элемента Menu. Я просто добавил пустой Menu.Item в качестве первого дочернего элемента моего меню, и ошибка исчезла.

<Menu>
  <Menu.Item style = {{display: 'none'}} />
  <div>...</div>
</Menu>

Я обнаружил, что дизайн Ant Подменю должен использовать родителя для проверки некоторых свойств, таких как isRootMenu, в

Подменю.js: 260

getPopupContainer = props.parentMenu.isRootMenu ? props.parentMenu.props.getPopupContainer : function (triggerNode) {
     return triggerNode.parentNode; 
}

Чтобы решить эту проблему, вам нужно вручную передать родительские реквизиты в SubMenu, например

<Menu.SubMenu {...this.props}/>

решить проблему. Надеюсь, это поможет вам

Связанный элемент проблемы Github https://github.com/react-component/menu/issues/255

В соответствии с определениями Typescript дочерние элементы меню должны быть типа Item, SubMenu, ItemGroup или Divider. Если вы должны поместить другой компонент в заголовок, оберните меню и нужный компонент в компонент компонента заголовка как такой:

import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

<Layout>
    <Layout.Header>
    <div className = "logo" />
    <Menu>
      <Menu.Item key = "1">nav 1</Menu.Item>
      <Menu.Item key = "2">nav 2</Menu.Item>
    </Menu>
  <Layout.Header>
</Layout>

Вы должны передать реквизит в подменю.

  const CustomComponent = (props) => (
    <Menu.SubMenu title='SubMenu' {...props}>
      <Menu.Item>SubMenuItem</Menu.Item>
    </Menu.SubMenu>
  )

поэтому решение вашего вопроса будет заключаться в следующем:

1. переместить запрос за пределы содержащего меню
2. передать реквизит в подменю

  const FloorMapSubMenu = ({ id, floorName, rooms, ...other }) => {
  return (
    <Menu.SubMenu
      key = {id}
      title = {
        <span>
          <Icon type = "plus" />
          <span>{floorName}</span>
        </span>
      }
      {...other} // notice the other props, this is were the 'isRootMenu' is injected from the <Menu> children
    >
      <React.Fragment>
        {rooms.map((room) => (
          <Menu.Item key = {room.id}>{room.roomNumber}</Menu.Item>
        ))}
      </React.Fragment>
    </Menu.SubMenu>
  )
}

class SideNav extends React.Component {
  render() {
    return (
      <Query query = {FLOORS_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <h4> loading... </h4>
          if (error) console.info(error)
          console.info(data)
          return (
            <Menu theme='light' defaultSelectedKeys = {['1']} mode='inline'>
              {data.getAllFloors.map((floor, i) => (
                <FloorMapSubMenu key = {i} id = {floor.id} floorName = {floor.floorName} rooms = {floor.rooms} />
              ))}
            </Menu>
          )
        }}
      </Query>
    )
  }
}