Infinite Tree示例代码异常：仅显示纯文本列表，如何修复？

问题概述 #

1. 运行Infinite Tree官方示例代码时，仅显示纯文本名称列表，无节点缩进和展开/收起功能，输出为：

Fruit
Apple
Banana
Cherry

预期为带层级和展开标识的树形结构。
2. 使用ChatGPT生成的代码运行后页面完全空白，无任何内容。

问题原因分析 #

纯文本列表问题原因 #

自定义的rowRenderer覆盖了默认渲染逻辑，但仅返回包含节点名称的简单div，未包含层级缩进容器、**展开/收起切换按钮（toggler）**等树形结构必需的元素，同时也未处理节点层级的样式偏移，导致树形结构的核心视觉和交互能力丢失。

页面空白问题原因 #

ChatGPT生成的代码存在两处关键错误：

• InfiniteTree构造函数的第一个参数应为配置对象（需包含el属性指定容器），而非直接传入选择器字符串；
• 使用了不存在的配置项loadChildren，正确的按需加载配置应为shouldLoadNodes和loadNodes，参数格式错误导致组件初始化失败。

修复方案 #

方案1：修复纯文本列表问题（恢复树形结构） #

移除自定义的rowRenderer配置，使用组件默认渲染逻辑，自动生成层级缩进和展开/收起按钮。以下是修改后的完整可运行代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Infinite Tree Example</title>
  <!-- 建议直接使用CDN CSS，避免本地文件遗漏样式 -->
  <link rel="stylesheet" href="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.css">
  <script src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
</head>
<body>
  <div id="tree"></div>

  <script>
    const data = {
        id: 'fruit',
        name: 'Fruit',
        children: [{
            id: 'apple',
            name: 'Apple'
        }, {
            id: 'banana',
            name: 'Banana',
            children: [{
                id: 'cherry',
                name: 'Cherry',
                loadOnDemand: true
            }]
        }]
    };

    const tree = new InfiniteTree({
        el: document.querySelector('#tree'),
        data: data,
        autoOpen: true,
        shouldLoadNodes: function(parentNode) {
            if (!parentNode.hasChildren() && parentNode.loadOnDemand) {
                return true;
            }
            return false;
        },
        loadNodes: function(parentNode, next) {
            const nodes = [];
            for (let i = 0; i < 5; ++i) {
                nodes[i] = {
                    id: `${parentNode.id}.${i}`,
                    name: `${parentNode.name}.${i}`,
                    loadOnDemand: true
                };
            }
            next(null, nodes);
        },
        nodeIdAttr: 'data-id',
        shouldSelectNode: function(node) {
            if (!node || (node === tree.getSelectedNode())) {
                return false;
            }
            return true;
        }
    });
  </script>
</body>
</html>

方案2：自定义渲染器（保留自定义需求） #

如果需要自定义节点样式，需完善rowRenderer，手动添加层级缩进和切换按钮，示例如下：

rowRenderer: function(node, treeOptions) {
    // 生成层级缩进的空白占位
    const indent = node.depth > 0 ? '  '.repeat(node.depth) : '';
    // 生成展开/收起按钮
    const toggler = node.hasChildren() ? 
        `<span class="infinite-tree-toggler">${node.state.open ? '▼' : '▶'}</span>` : '';
    
    return `<div data-id="${node.id}" class="infinite-tree-item">
        ${indent}${toggler}${node.name}
    </div>`;
}

修复页面空白问题（修正ChatGPT生成的代码） #

调整构造函数参数格式，使用正确的配置项：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Infinite Tree Fixed</title>
  <link rel="stylesheet" href="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.css">
  <script src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
</head>
<body>
  <div id="tree"></div>

  <script>
    const data = {
        id: 'fruit',
        name: 'Fruit',
        children: [{ id: 'apple', name: 'Apple' }, { id: 'banana', name: 'Banana' }]
    };

    const tree = new InfiniteTree({
        el: document.querySelector('#tree'),
        data: data,
        autoOpen: true,
        shouldLoadNodes: function(parentNode) {
            // 按需加载逻辑
            return !!parentNode.loadOnDemand && !parentNode.hasChildren();
        },
        loadNodes: function(parentNode, next) {
            // 模拟异步加载子节点
            setTimeout(() => {
                const nodes = [{ id: `${parentNode.id}-1`, name: `${parentNode.name} Child 1` }];
                next(null, nodes);
            }, 500);
        }
    });
  </script>
</body>
</html>

额外注意事项 #

• 确保CSS文件正确引入，优先使用官方CDN资源避免样式遗漏；
• 按需加载功能需配合shouldLoadNodes和loadNodes两个配置项使用，缺一不可；
• 自定义rowRenderer时，需保留infinite-tree-item等核心类名，确保样式和交互生效。

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