React技术问题：如何用图片替换TreeView无序列表项目符号

先解决Codesandbox常见问题 #

• 图片路径校验：上传的图片需通过import引入，确保路径与文件结构匹配，比如import PlusIcon from './plus.png';
• 依赖补全：如果使用了XML解析库（如xml-js），需在Codesandbox的依赖面板中搜索添加该包

核心修复实现 #

1. 状态与图标逻辑设计

• 给每个可展开节点维护isExpanded状态，初始设为false实现默认折叠
• 图标切换规则：
  • 非叶子节点（如service、sales）：折叠时显示PLUS图标，展开时显示minus图标
  • 叶子节点（最后一级节点）：始终显示paper图标

2. 完整修复代码

import React, { useState, useEffect } from 'react';
import xmljs from 'xml-js';
import PlusIcon from './plus.png';
import MinusIcon from './minus.png';
import PaperIcon from './paper.png';
import './TreeView.css';

const TreeView = ({ xmlData }) => {
  const [treeData, setTreeData] = useState([]);

  // 解析XML为树形结构（根据你的XML结构调整转换逻辑）
  useEffect(() => {
    const parsedResult = xmljs.xml2js(xmlData, { compact: true, spaces: 2 });
    setTreeData(parsedResult.root?.children || []);
  }, [xmlData]);

  // 递归渲染节点
  const renderTreeNode = (node) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const hasChildren = node.children && node.children.length > 0;
    const isLeafNode = !hasChildren;

    // 确定当前节点显示的图标
    const iconSrc = isLeafNode 
      ? PaperIcon 
      : isExpanded ? MinusIcon : PlusIcon;

    return (
      <li className="tree-node">
        <div 
          className="node-header" 
          onClick={() => hasChildren && setIsExpanded(!isExpanded)}
        >
          <img 
            src={iconSrc} 
            alt={isLeafNode ? 'paper' : isExpanded ? 'minus' : 'plus'} 
            className="node-icon" 
          />
          <span>{node.name}</span>
        </div>
        {hasChildren && isExpanded && (
          <ul className="tree-children">
            {node.children.map(child => renderTreeNode(child))}
          </ul>
        )}
      </li>
    );
  };

  return (
    <ul className="tree-view">
      {treeData.map(node => renderTreeNode(node))}
    </ul>
  );
};

export default TreeView;

3. 配套样式（TreeView.css）

/* 移除默认列表样式 */
.tree-view, .tree-children {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

.tree-node {
  margin: 4px 0;
}

/* 节点头部样式，实现图标与文字对齐 */
.node-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.node-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

额外调整提示 #

• XML解析逻辑：根据你实际的XML结构，修改useEffect中的数据转换代码，确保正确提取节点名称和子节点层级
• 图片尺寸：可通过CSS的width/height调整图标大小，适配页面布局

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