react 递归生成树形菜单

首先你需要准备一个类似如下的树形json

const lists = [
  {
    key: "2",
    name: "tab2",
    feat1: "",
    children: [
      {
        key: "2-1",
        name: "2-1",
        feat1: "xxxx",
      },
      {
        key: "2-2",
        name: "2-2",
        feat1: "zzzz",
      },
    ],
  },
  {
    key: "3",
    name: "tab3",
    feat1: "",
    children: [
      {
        key: "3-1",
        name: "3-1",
        feat1: "aaaa",
      },
      {
        key: "3-2",
        name: "3-2",
        feat1: "",
        children: [
          {
            key: "3-2-1",
            name: "3-2-1",
            feat1: "qqqq",
          },
          {
            key: "3-2-2",
            name: "3-2-2",
            feat1: "wwww",
          },
        ]
      },
    ],
  },
  {
    name: "tab5",
    feat1: "llll",
    key: "5",
  },
];

然后需要一个递归函数

const genMenu = (dataList: any[]) => {
  return dataList.map((t1) => {
    if (!t1.children) {
      return (
        <Menu.Item>
          <a href={t1.feat1}>{t1.name}</a>
        </Menu.Item>
      );
    }
    return <SubMenu title={t1.name}>{genMenu(t1.children)}</SubMenu>;
  });
};

最后渲染组件

const newMenu1 = (
  <Menu>
    {lists.map((t1) => {
      if (!t1.children) {
        return (
          <Menu.Item>
            <a href={t1.feat1}>{t1.name}</a>
          </Menu.Item>
        );
      }
      return <SubMenu title={t1.name}>{genMenu(t1.children)}</SubMenu>;
    })}
  </Menu>
);

return (
  <Dropdown overlay={newMenu1}>
    <a onClick={(e) => e.preventDefault()}>
      list menu <DownOutlined />
    </a>
  </Dropdown>
);

附：效果 codesandbox地址