构建可扩展的多级分类树 HTML 生成器：递归实现与常见陷阱规避-html教程

本文详解如何用递归函数正确生成嵌套 html 列表（ul/li）来渲染深度达 6 层的分类树，重点解决因变量复用、递归调用位置错误导致的 html 结构重复与错乱问题，并提供健壮、可维护的实现方案。

在构建电商、CMS 或知识库系统时，常需将具有父子关系的分类数据（如「电子 > 手机 > 智能手机 > 品牌」）渲染为带层级缩进与折叠箭头的导航菜单。此时，递归是天然且最优的解决方案——它天然契合树形结构的定义：每个节点可拥有零个或多个子节点，而子节点本身又是相同结构的树。相比迭代+栈模拟或预处理扁平化（如闭包表、路径枚举），递归代码简洁、语义清晰、易于调试，尤其适合中等深度（≤6 层）且数据量可控的场景。

但正如提问者所遇，递归易因状态管理不当而引发严重副作用。原代码存在三大关键缺陷：

1. 累加变量污染：$listAllEntries 同时作为输入参数和拼接载体，在多层递归中被反复追加，导致子树内容被重复插入父级字符串；
2. 索引 $i 未隔离：层级类名（second/third…）依赖 $i，但 $i++ 在父级循环中执行，子递归返回后 $i 已改变，破坏层级映射；
3. HTML 结构断裂：
   开标签与闭标签

   不在同一次调用中成对生成，且子递归结果未被包裹在

4. 内，导致嵌套错位。

✅ 正确做法是：每次递归调用应独立构造其子树 HTML，并返回完整字符串；父级负责拼接

，而非共享累加变量。以下是优化后的专业实现：

function renderCategoryTree(array $categoryTree, int $depth = 0): string
{
    // 定义层级 CSS 类映射（支持最多 6 层：first → sixth）
    $levelClasses = [
        0 => 'first',
        1 => 'second',
        2 => 'third',
        3 => 'fourth',
        4 => 'fifth',
        5 => 'sixth'
    ];

    $currentClass = $levelClasses[$depth] ?? 'sixth'; // 超深时降级

    $html = "
";

    // 遍历当前层级所有子分类
    foreach ($categoryTree['sub'] ?? [] as $child) {
        $hasChildren = !empty($child['sub']);
        $arrowClass = $hasChildren ? 'arrow-right' : '';

        // 构建当前项链接
        $linkHtml = sprintf(
            '%s',
            htmlspecialchars($arrowClass),
            htmlspecialchars($child['link'] ?? '#'),
            htmlspecialchars($child['name'] ?? 'Untitled')
        );

        // 递归生成子树（仅当有子节点时）
        $subTreeHtml = $hasChildren 
            ? renderCategoryTree($child, $depth + 1) 
            : '';

        // 组装完整 
：链接 + （可选）子树 ul
        $html .= "
{$linkHtml}{$subTreeHtml}
";
    }

    $html .= "
";
    return $html;
}

// 使用示例：
// $categoryTree = ['name' => 'Root', 'link' => '/', 'sub' => [...]];
// echo renderCategoryTree(['sub' => $yourTopLevelCategories]);

? 关键改进说明：