构建多级分类树的递归渲染教程：生成嵌套 HTML 列表结构

本文详解如何正确使用递归函数遍历任意深度的分类树，并生成符合语义、层级清晰的嵌套 `

• ` html 字符串，避免重复拼接、层级错乱与变量污染问题。

  在构建电商、CMS 或导航菜单等需要展示多级分类（如“电子产品 → 手机 → 智能手机 → 国产旗舰”）的场景中，将扁平/嵌套数组结构转化为带层级关系的 HTML 列表是常见需求。此时，递归是最自然、最符合树形结构本质的解决方案——它无需预判最大深度（如 6 层），代码简洁且可读性强。相比迭代（如栈模拟）或数据库预排序（如闭包表），递归在 PHP 中实现直观、维护成本低，是中小型项目首选。

  但递归易出错的关键在于：状态管理混乱。原代码中存在多个典型问题：

  • ❌ 将 $listAllEntries 作为输入参数并持续累加，导致子调用时父级内容被重复拼入；
  • ❌ 错误地将 $children[] = $listAllEntries 等操作混入循环体，造成数据污染；
  • ❌ $i 层级计数器未隔离作用域，跨分支递归时值被意外覆盖；
  • ❌ trim($listAllEntries, "Array") 等临时补丁掩盖了逻辑缺陷。

  ✅ 正确做法是：让递归函数专注“生成当前层级的 HTML 片段”，不依赖外部变量累积结果。每个调用应独立返回其子树的完整 HTML 字符串，由上层负责拼接。

  以下是优化后的专业实现：

  立即学习“前端免费学习笔记（深入）”；

  

  ModelArts

  华为AI开发平台ModelArts，面向开发者的一站式AI开发平台

  下载

  function renderCategoryTree(array $categoryTree, int $depth = 0): string
  {
      // 定义层级 class 后缀映射（支持最多 6 层）
      $levelClasses = [
          0 => 'first',
          1 => 'second',
          2 => 'third',
          3 => 'fourth',
          4 => 'fifth',
          5 => 'sixth'
      ];
  
      $currentClass = $levelClasses[$depth] ?? 'other';
      $html = "
  ";
  
      // 遍历当前节点的所有直接子分类
      foreach ($categoryTree['sub'] ?? [] as $item) {
          $hasChildren = !empty($item['sub']);
          $arrowClass = $hasChildren ? 'arrow-right' : '';
  
          // 渲染当前分类项
          $html .= "
  ";
          $html .= "{$item['name']}";
  
          // 若有子分类，递归渲染下一层，并增加 depth
          if ($hasChildren) {
              $html .= renderCategoryTree($item, $depth + 1);
          }
  
          $html .= "
  ";
      }
  
      $html .= "
  ";
      return $html;
  }
  
  // 使用示例：
  $root = [
      'sub' => [
          [
              'name' => '电子产品',
              'link' => '/category/electronics',
              'sub' => [
                  [
                      'name' => '手机',
                      'link' => '/category/phones',
                      'sub' => [
                          ['name' => '智能手机', 'link' => '/category/smartphones', 'sub' => []],
                          ['name' => '功能机', 'link' => '/category/feature-phones', 'sub' => []]
                      ]
                  ]
              ]
          ]
      ]
  ];
  
  echo renderCategoryTree($root); // 输出完整嵌套 HTML

  ? 关键改进说明：

  • ✅ 纯函数式设计：不修改任何输入参数，无全局/引用变量，$depth 仅用于计算 class，不影响逻辑流；
  • ✅ 层级 class 自动推导：通过 $depth 参数精确控制 first/second… 类名，避免手动维护 $childLists 数组和 $i++ 副作用；
  • ✅ 安全空值处理：使用 ?? [] 防止 ['sub'] 不存在时报错；
  • ✅ 语义化结构：每个
    严格包裹其直属子项，无冗余闭合或错位嵌套；
  • ✅ 可扩展性强：如需添加 data-id、aria-expanded 等属性，只需在对应位置插入即可。

  ⚠️ 注意事项：

  • 若分类树极深（>100 层），需检查 PHP xdebug.max_nesting_level 设置，防止栈溢出；
  • 生产环境建议对 $item['name'] 和 $item['link'] 做 htmlspecialchars() 转义，防御 XSS；
  • 如需 SEO 友好或支持键盘导航，可为有子项的 添加 aria-haspopup="true" 和 aria-expanded="false"，并通过 JS 动态控制。

  总结：递归不仅是可行方案，更是处理树形结构的最优解。成败不在“是否递归”，而在是否遵循单一职责、隔离状态、明确输入输出。掌握本模式后，你可轻松应对无限层级的菜单、评论嵌套、组织架构图等各类树形渲染任务。