React 递归渲染侧边栏+antd

思路：

• 每一层的显示逻辑应该是一样的，都是渲染这一层的列表即可
• 对于子菜单的渲染逻辑也类似，如果当前项有 children 属性，递归调用即可

---

 

实现渲染:

获取数据 :使用自定义json数据或请求接口的数据

 // 使用useMemo
  let items = useMemo(() => {
    // 取出本地存储的数据
    let info = localStorage.getItem("info");

    let nMens = [];
    if (info) {
      // JSON.parse
      info = JSON.parse(info);
      
      //addItem调用
      nMens = addItem(info);
    }

    return nMens;
  }, []);
  console.log(items);

拓展：字体图标

import { createFromIconfontCN } from "@ant-design/icons";

const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_3779679_iip3gep8cj.js",
});

渲染侧边栏

function addItem(info) {
  let nMens = [];
  nMens = info.map((v) =>