鍍金池/ 問答/HTML/ React+Antd Menu菜單組件多級循環(huán)渲染下的報錯問題

React+Antd Menu菜單組件多級循環(huán)渲染下的報錯問題

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

代碼結(jié)構(gòu)如下:

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>
    ));

數(shù)據(jù)結(jié)構(gòu)如下:

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
    }]

請問是什么原因呢?

回答
編輯回答
陌離殤

Menu.item改成Menu.Item……

2017年10月19日 16:48