2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

React+Antd Menu菜单组件多级循环渲染下的报错问题

react.js作者:猿2048志愿者

7.5 更新:问题原因是,标签大小写写错了
Menu.item改为Menu.Item,就可以了

三级菜单渲染出错,
报错信息如下:

clipboard.png

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LayoutWrap`.
    in LayoutWrap (created by Connector)
    in Connector (created by Connect(Connector))
    in Connect(Connector) (created by App)
    in div (created by App)
    in App (created by Route)
    in Route
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

代码结构如下遇新是直朋能到

const menuContent = menuGroup.value.map((val, index) => (
      <SubMenu
        key={'sub' + index}
        className={style.menuMargin}
        title={<span><Icon type='user'/><span>{val.name}</span></span>}
      >
        nodes.children ?
        {(val.children || []).map((nodes, num) => (
            <SubMenu
              key={nodes.name}
              className={style.menuMargin}
              title={<span><Icon type='user'/><span>{nodes.name}</span></span>}
            >
              {
                nodes.children.map((value, num) => (
                  <Menu.item
                    onClick={() => this.onHandleClick(value.name)}
                    key={value.name}
                  >
                    <Link to={utils.selectedMenuRouteData(value.name,'toPath')}>{value.name}</Link>
                  </Menu.item>
                ))
              }
            </SubMenu>
            :
            <Menu.Item onClick={() => this.onHandleClick(nodes.name)} key={nodes.name}>
              <Link to={utils.selectedMenuRouteData(nodes.name,'toPath')}>{nodes.name}</Link>
            </Menu.Item>
        ))}
      </SubMenu>
    ));

数据结构如下遇新是直朋能到

const value= [
    {
      "children": [{
        "children":[{
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 3,
        "name": "子部门管理",
        "num": 1,
        "parentId": 0,
        "url": null
      }],
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "公司管理",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "部门管理",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "职位管理",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "用户管理",
        "num": 1,
        "parentId": 0,
        "url": null
      }],
      "icon": "",
      "id": 1,
      "ismenu": 1,
      "levels": 1,
      "name": "SSO管理",
      "num": 1,
      "parentId": 0,
      "url": null
    }]

请问是什么原遇新是直朋能到分览因呢?

猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关问题

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-04-11中奖名单(每日10名)
×添加代码片段