antd中menu菜单数据异步加载

在Ant Design（antd）库中，Menu组件支持异步加载菜单项的功能，这通常用于处理动态生成的数据或从服务器获取的数据。你可以通过`loadData`属性来实现实时加载。这个属性接收一个函数作为参数，当用户滚动到某个分组或菜单项时，该函数会被触发，返回一个新的菜单项数组。

下面是一个简单的例子：

import { Menu, Button } from 'antd';

const asyncLoad = (parentId) => {
  // 模拟异步加载数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          key: `${parentId}-1`,
          title: 'Async Item 1',
        },
        {
          key: `${parentId}-2`,
          title: 'Async Item 2',
          children: [
            {
              key: `${parentId}-2-1`,
              title: 'Async Sub-item 1',
            },
          ],
        },
      ]);
    }, 1000);
  });
};

const App = () => {
  const [menuItems, setMenuItems] = React.useState([]);

  // 初始化加载顶级菜单
  asyncLoad('').then(setMenuItems);

  return (
    <div>
      <Button onClick={() => asyncLoad('parent')}>
        异步加载更多菜单
      </Button>

      <Menu defaultSelectedKeys={['1']}>
        {menuItems.map((item) => (
          <Menu.Item key={item.key} loading={item.loading}>
            {item.title}
            {item.children && (
              <Menu.SubMenu key={`${item.key}-submenu`} title={item.title}>
                {item.children.map((subItem) =>
                  <Menu.Item key={`${item.key}-${subItem.key}`}>{subItem.title}</Menu.Item>,
                )}
              </Menu.SubMenu>
            )}
          </Menu.Item>
        ))}
      </Menu>
    </div>
  );
};

在这个示例中，当你点击"异步加载更多菜单"按钮时，会模拟一个延迟1秒的请求，并更新`menuItems`状态。`<Menu>`会根据当前的菜单结构渲染相应的异步加载效果。