递归实现多级菜单遍历，附antd的menu实现方案

女爷i 2023-02-24 03:49 7阅读 0赞

递归实现的方法，通过是否包含children决定是否需要递归调用

/**
     *
     * @param { 路由列表 } data
     * @param { 从地址栏获取的路由 } pathKey
     * openKey是添加的是否展开父菜单的参数
     */
    const initKey = (data, pathKey) => {
      const list = [];
      const key = null;
      const getList = data => {
        data.map(item => {
          if (item.children && item.children.length) {
            const children = item.children.map(subItem => {
              return { ...subItem, openKey: item.name };
            });
            getList(children); // 递归调用
          } else {
            let newItem = { ...item };
            if (!Object.prototype.hasOwnProperty.call(item, 'openKey')) {
              newItem = { ...item, openKey: item.name };
            }
            list.push(newItem);
          }
        });
      };
    
      getList(data);
      console.log(list);
      const filtered = list.find(item => item.path === pathKey);
      console.log('filtered', filtered);
      if (filtered) {
        const key = filtered.name;
        return key;
      }
      return key;
    };

调用过程

附： antd的menu实现

export default function WrappedLink({ to, ...rest }) {
      return <Link to={to} {...rest} />;
    }
    /**
     * 用于antd menu
     * defaultOpenKeys代表需要默认展开的菜单，selectedKeys代表选中的菜单
     */
    <Menu
      mode="inline"
      defaultOpenKeys={[keyObj.openKey]}
      selectedKeys={[keyObj.key]}
      style={
       { height: '100%', borderRight: 0 }}
    >
      {data &&
        data.map(item =>
          item.children ? (
            <SubMenu key={item.name} title={item.name} icon={item.iconType}>
              {item.children &&
                item.children.map(child => (
                  <Menu.Item key={child.name}>
                    <WrappedLink to={child.path}>{child.name}</WrappedLink>
                  </Menu.Item>
                ))}
            </SubMenu>
          ) : (
            <Menu.Item key={item.name}>
              {item.iconType}
              <WrappedLink to={item.path}>{item.name}</WrappedLink>
            </Menu.Item>
          )
        )}
    </Menu>;

关于递归遍历，这篇文章讲的很细致可以参考：[递归遍历的讲解][Link 1]

[Link 1]: https://juejin.im/post/5c1a1456518825644e622832#heading-2