深度优先遍历:
如果当前菜单项含有 children 属性,就将其渲染为父菜单并优先渲染其 children 字段下的子菜单
import { Link } from 'react-router-dom';
const { Item } = Menu;
function renderMenu(data) {
return data.map((item) => {
const { children, path, icon, name } = item;
if (children && children.length) {
return (
<SubMenu
key={path}
title={
<span>
<Icon type={icon} />
{name}
</span>
}
>
{renderMenu(children)}
</SubMenu>
);
}
return (
<Item key={path}>
<Link to={path} href={path}>
<Icon type={icon} />
{name}
</Link>
</Item>
);
});
}