antd SubMenu "TypeError: 无法读取未定义的属性 'isRootMenu'"

Question

我使用 antd 3.15 和 GraphQL 来获取数据并在 Menu 内生成 SubMenu 和 Menu.Item 的列表。但是，我收到了这样的错误消息，Uncaught TypeError: Cannot read property 'isRootMenu' of undefined我不知道我的代码有什么问题。isRootMenu不是文档中任何地方列出的道具。ant.design/components/menu/#header并且当我对所有 SubMenu 和 Menu.List 进行硬编码时，没有问题。我可以从 GraphQL 迭代数据以生成 SubMenu 和 Menu.List 吗？

有人可以帮我解决这个问题吗？谢谢！这是我的代码：

import * as React from 'react';
import './SideNav.scss';
import { Menu, Icon } from 'antd';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const FLOORS_QUERY = gql`
  query {
    getAllFloors {
      id
      floorName
      rooms {
        id
        roomName
        roomNumber
        roomDescription
      }
    }
  }
`;

export default class SideNav extends React.Component {
  render() {
    return (
      <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
        <Query query={FLOORS_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <h4> loading... </h4>;
            if (error) console.log(error);
            console.log(data);
            return (
              <React.Fragment>
                {data.getAllFloors.map((floor) => (
                  <SubMenu
                    key={floor.id}
                    title={
                      <span>
                        <Icon type="plus" />
                        <span>{floor.floorName}</span>
                      </span>
                    }
                  >
                    <React.Fragment>
                      {floor.rooms.map((room) => (
                        <Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
                      ))}
                    </React.Fragment>
                  </SubMenu>
                ))}
              </React.Fragment>
            );
          }}
        </Query>
      </Menu>
    );
  }
}

Answer 1

您应该将道具传递给子菜单。

  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.log(error)
          console.log(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>
    )
  }
}