CSS递归绘制树形结构异常：层级样式失效求助

核心问题 #

你的递归树形组件存在两个关键问题：

1. 类名逻辑错误：没有根据当前节点的层级动态分配对应类，反而给所有递归节点都加上了category类（粗体样式），导致所有层级都显示粗体。
2. 事件隔离失效：悬停事件没有绑定到单个节点上，或者因事件冒泡导致父节点的悬停效果被触发，看起来是整体而非单个层级生效。

修复步骤 #

1. 给递归组件添加层级参数，动态分配类名

递归渲染时必须传递当前节点的层级值，根据层级判断应该添加的类：

• 初始调用时传入level=0（根节点）
• 渲染子节点时传递level+1，并限制最多到层级2（leaf类）

示例修复代码：

const RecursiveTreeItem = ({ item, level = 0 }) => {
  // 根据层级获取对应类名
  const getNodeClass = () => {
    switch (level) {
      case 0: return 'category';
      case 1: return 'group';
      case 2: return 'leaf';
      default: return '';
    }
  };

  return (
    <div className={getNodeClass()}>
      {item.name}
      {/* 仅在层级小于2时渲染子节点，符合最多两级的要求 */}
      {item.children && level < 2 && (
        <div className="children">
          {item.children.map(child => (
            <RecursiveTreeItem key={child.id} item={child} level={level + 1} />
          ))}
        </div>
      )}
    </div>
  );
};

// 初始调用
<RecursiveTreeItem item={data} level={0} />

2. 修复鼠标悬停的事件隔离

确保悬停事件绑定在单个节点的容器上，避免冒泡影响父节点：

// 在递归组件中给单个节点绑定悬停事件
<div 
  className={getNodeClass()}
  onMouseEnter={(e) => {
    e.stopPropagation(); // 阻止事件冒泡到父节点
    // 你的悬停逻辑，比如添加active类
    e.currentTarget.classList.add('hover-active');
  }}
  onMouseLeave={(e) => {
    e.stopPropagation();
    e.currentTarget.classList.remove('hover-active');
  }}
>
  {/* 节点内容 */}
</div>

为什么原来的代码会出错 #

• 你之前的递归组件没有传递层级参数，所有节点都复用了根节点的category类，导致全部显示粗体。
• 悬停事件如果绑定在父容器或者没有阻止冒泡，当鼠标移到子节点时，父节点的悬停事件也会被触发，看起来是整个树形结构都有悬停效果。

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