递归遍历嵌套对象向数组推入JSX菜单元素的技术问询

看起来你正在用Ant Design的Menu组件，通过递归遍历嵌套对象来构建带下拉的菜单结构，我帮你把代码补全并梳理清楚逻辑，解决里面的小问题：

完整代码示例 #

// 初始化空菜单数组，用来存放生成的菜单项
let menu = [];
this.createDropDown(menu, objects);
return menu;

// 递归生成菜单的核心方法
createDropDown = (menu, objects) => {
  const keys = Object.keys(objects);
  
  // 情况1：当前对象只有一个键，生成普通菜单项
  if (keys.length === 1) {
    const itemKey = keys[0];
    menu.push(
      <Menu.Item key={itemKey}>{itemKey}</Menu.Item>
    );
  } 
  // 情况2：当前对象有多个键，生成带下拉的子菜单
  else {
    for (const key of keys) {
      // 单独创建子菜单的数组，递归填充
      const subMenuItems = [];
      this.createDropDown(subMenuItems, objects[key]);
      
      menu.push(
        <SubMenu key={key} title={key}>
          {subMenuItems}
        </SubMenu>
      );
    }
  }
};

关键细节修正与说明 #

• key值的正确性：你原来的key={Object.keys(objects)}会把数组作为key，React会报错，这里改成取数组的第一个元素keys[0]，保证每个菜单项的key唯一且合法
• 子菜单的结构：Ant Design的SubMenu需要明确的title属性和children内容，我单独创建了subMenuItems数组，递归填充后作为子菜单的内容，结构更清晰
• 遍历方式优化：把for...in改成for...of，避免遍历到对象原型链上的无关属性，更安全可靠
• 递归逻辑通顺：不管对象嵌套多少层，递归都会自动逐层处理，生成对应的多层下拉菜单

测试用的嵌套对象示例 #

你可以用下面的结构测试代码：

const objects = {
  "首页": {},
  "系统管理": {
    "用户管理": {},
    "权限配置": {
      "角色管理": {},
      "菜单分配": {}
    }
  },
  "个人中心": {}
};

如果是函数组件的话，记得把createDropDown改成普通函数，或者用useCallback包裹避免重复渲染哦～

内容的提问来源于stack exchange，提问作者Dorra Hadrich