React JS解析JSON使用array.map实现嵌套侧边菜单

完全可以通过Array.map嵌套调用实现你需要的缩进侧边菜单效果，你的数据是标准三层嵌套结构，只需要对应做三层map遍历，配合CSS控制缩进即可，实现非常简便。

实现思路 #

你的菜单一共分三个层级，对应三次map遍历即可：

• 最外层遍历根菜单数组，渲染John、Sarah这类顶级菜单项
• 遍历每个顶级菜单下的subMenus数组，因为每个子项是{分组名: 菜单项数组}的单键对象，用Object.entries可以直接取出First、Second这类分组名，以及分组对应的菜单项列表，给这一层加固定缩进
• 遍历每个分组下的菜单项数组，渲染带跳转地址的最终菜单项，再加一层缩进

代码示例 #

下面是可直接复用的React组件实现，缩进通过内联样式控制，你可以自行调整数值匹配设计稿：

function Sidebar() {
  const menuList = [
    {"name":"John",
    "subMenus":[{"First":[{"name":"Vulnerability","to":"/johnvulner"},
                          {"name":"Open Roles","to":"/johnopenRoles"}
                         ]},
                {"Second":[{"name":"Some People","to":"/johnpeople"},
                          {"name":"Another People","to":"/johnanotherpeople"}
                         ]}],
    },
  {"name":"Sarah",
    "subMenus":[{"First":[{"name":"Vulnerability","to":"/sarahvulner"},
                          {"name":"Open Roles","to":"/sarahopenRoles"}
                         ]},
                {"Second":[{"name":"Some People","to":"/sarahsomepeople"},
                          {"name":"Another People","to":"/sarahanotherpeople"}
                         ]}],
    }
  ];

  return (
    <div className="sidebar">
      {/* 第一层：顶级菜单 */}
      {menuList.map((topItem, topIndex) => (
        <div key={topIndex}>
          <div>{topItem.name}</div>
          {/* 第二层：分组菜单 */}
          {topItem.subMenus.map((group, groupIndex) => {
            const [groupTitle, itemList] = Object.entries(group)[0];
            return (
              <div key={groupIndex} style={{paddingLeft: '32px'}}>
                <div>{groupTitle}</div>
                {/* 第三层：具体菜单项 */}
                {itemList.map((menuItem, itemIndex) => (
                  <a 
                    key={itemIndex}
                    href={menuItem.to}
                    style={{paddingLeft: '32px', display: 'block'}}
                  >
                    {menuItem.name}
                  </a>
                ))}
              </div>
            )
          })}
        </div>
      ))}
    </div>
  )
}

补充说明 #

• 渲染时给每个列表项加唯一key属性，避免React渲染性能问题和警告
• 缩进数值可以根据你的UI需求调整，也可以抽成CSS类统一管理，比内联样式更易维护
• 如果后续需要加菜单折叠、选中高亮、路由跳转等功能，直接在对应层级加状态判断即可，不需要改动核心遍历逻辑

内容的提问来源于stack exchange，提问作者Amron Norma