使用 map Loop 将子菜单添加到 antd 菜单答案

【问题标题】：Adding Submenu to antd menu using map Loop使用 map Loop 将子菜单添加到 antd 菜单
【发布时间】：2022-11-11 12:26:15
【问题描述】：

  let navigationConfig = [
    {
      key: "1",
      path: `${match.url}/lead-information`,
      title: "lead-information",
      breadcrumb: true,
      icon: HomeOutlined,
    },
    {
      key: "2",
      navigate: false,
      breadcrumb: true,
      onclick: () => editClickedReminder(),
      title: "Add Reminder",
      icon: BellOutlined,
    },
    {
      key: "3",
      title: "History",
      icon: FieldTimeOutlined,
      breadcrumb: true,
      submenu: [
        {
          key: "4",
          path: `${match.url}/edit`,
          title: "History",
          icon: EditFilled,
          breadcrumb: true,

        },
      ],
    }
  ];

我有这段代码，我疯狂地循环导航配置，我在导航配置中提到了子菜单，但我没有得到子菜单

{navigationConfig.map((menu) => {
                return (
                  <Menu.Item key={menu.key} onClick={menu.onclick}>
                    {menu.icon ? <Icon type={menu?.icon} /> : null}
                    {menu.title}
                    {menu.path ? (
                      <Link
                        to={{
                          pathname: menu.path,
                          state: history.location.state,
                        }}
                        onClick={() => {
                          setHeaderTitle(
                            menu.hasOwnProperty("aliasTitle")
                              ? menu.aliasTitle
                              : menu.title
                          );
                        }}
                      />
                    ) : null}
                  </Menu.Item>
                );
              })}

有谁知道我如何获得子菜单下面是我得到的屏幕截图

【问题讨论】：

标签： reactjs

【解决方案1】：

你应该检查这个页面https://ant.design/components/menu/

您是否尝试过 children 而不是 submenu ？

【讨论】：

所以我在这里搜索过，但他们指定了所有静态数据。而且我的格式略有不同

【解决方案2】：

antd 有两种菜单语法，旧的就是使用这种语法

<Menu>
  <Menu.Item>item 1</Menu.Item>
  <Menu.Item>item 2</Menu.Item>
  <Menu.SubMenu title="sub menu">
    <Menu.Item>item 3</Menu.Item>
  </Menu.SubMenu>
</Menu>

新语法就像<Menu items={items} /> 源数据（这里称为项目）格式如下：

const items = [
  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
  { label: 'item 2', key: 'item-2' }, // which is required
  {
    label: 'sub menu',
    key: 'submenu',
    children: [{ label: 'item 3', key: 'submenu-item-1' }],
  },
]

你好像把这两个混在一起了！

您可以执行以下操作之一：

手动映射数据并返回所需的 jsx 元素
将源数据更改为正确格式

【讨论】：