在React中如何按分类层级展示侧边栏子菜单链接？

核心优化思路 #

你当前的问题核心是平级的路由数据没有先按分类聚合，直接遍历导致无法按分组渲染，且硬编码判断action类型，其他分类无法正常展示。优化逻辑如下：

• 先将平级的路由数据按type字段分组，得到每个分类对应的子项集合，避免硬编码判断分类类型，可扩展性更强
• 嵌套遍历渲染：外层遍历所有分类渲染子菜单容器，内层遍历对应分类下的子项渲染菜单项

具体实现代码 #

import React from 'react';
import {Menu} from './menu/menu';
import {SubMenu} from './menu/submenu';
import {SubMenuItem} from './menu/submenuitem';

export function SideMenu({ routes }) {
    // 1. 按type分组路由数据
    const groupedRoutes = routes.reduce((groups, route) => {
      const { type } = route
      if (!groups[type]) groups[type] = []
      groups[type].push(route)
      return groups
    }, {})

    // 菜单项点击处理逻辑可根据业务需求调整
    const onClickHandler = (menuKey) => {
      // 可在这里实现路由跳转、选中态切换等逻辑
      console.log('点击菜单项：', menuKey)
    }

    return (
        <SideBar>
            <Menu>
                {/* 2. 遍历所有分类渲染SubMenu */}
                {Object.entries(groupedRoutes).map(([type, menuList]) => (
                    <SubMenu 
                      key={type}
                      title={type.charAt(0).toUpperCase() + type.slice(1)} // 自动将分类名首字母大写作为标题
                    >
                      {/* 3. 遍历当前分类下的所有子项渲染SubMenuItem */}
                      {menuList.map(route => (
                        <SubMenuItem 
                          type={route.type} 
                          key={route.key} 
                          name={route.name} 
                          onClick={() => onClickHandler(route.key)} 
                        />
                      ))}
                    </SubMenu>
                ))}
            </Menu>
        </SideBar>
    );
}

扩展说明 #

• 如果需要给分类配置和type字段不同的显示名，可以单独维护映射表，比如const typeLabelMap = { action: '动作片', comedy: '喜剧片', horror: '恐怖片' }，替换SubMenu的title取值即可
• 后续新增分类（比如你提到的horror分类）只要在数据源中添加对应type的数据即可，无需修改渲染逻辑
• 可按需给SubMenu添加展开/收起的状态控制，实现点击分类标题切换子项显隐的交互

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