深度优先遍历:
如果当前菜单项含有 children 属性,就将其渲染为父菜单并优先渲染其 children 字段下的子菜单

  1. import { Link } from 'react-router-dom';
  2. const { Item } = Menu;
  3. function renderMenu(data) {
  4. return data.map((item) => {
  5. const { children, path, icon, name } = item;
  6. if (children && children.length) {
  7. return (
  8. <SubMenu
  9. key={path}
  10. title={
  11. <span>
  12. <Icon type={icon} />
  13. {name}
  14. </span>
  15. }
  16. >
  17. {renderMenu(children)}
  18. </SubMenu>
  19. );
  20. }
  21. return (
  22. <Item key={path}>
  23. <Link to={path} href={path}>
  24. <Icon type={icon} />
  25. {name}
  26. </Link>
  27. </Item>
  28. );
  29. });
  30. }

为什么父菜单不对应一个具体的路由,但配置项中还有 path 属性