React树形组件如何根据指定ID默认展开节点路径

这个问题我之前做树形组件的时候也碰到过，你现在的核心问题是每个TreeNode自己维护展开状态，没法从外部统一控制整条路径的展开。咱们可以通过状态提升+路径计算的方式来解决，具体步骤如下：

1. 先写一个工具函数，找出目标节点的完整路径 #

首先需要递归遍历树形数据，找到从根节点到目标节点的所有父节点ID（包括目标节点自身），这样就能知道哪些节点需要默认展开。

// 递归查找目标节点的完整路径（返回包含所有父节点+自身的ID数组）
const findNodePath = (data, targetId, path = []) => {
  for (const item of data) {
    // 找到目标节点，返回当前路径+自身ID
    if (item.id === targetId) {
      return [...path, item.id];
    }
    // 如果有子节点，递归查找
    if (item.children) {
      const childPath = findNodePath(item.children, targetId, [...path, item.id]);
      if (childPath) return childPath;
    }
  }
  return null;
};

2. 修改TreeView，统一管理展开状态 #

把原来分散在每个TreeNode里的展开状态，提升到父组件TreeView中用一个Set来存储。同时在组件初始化或目标节点ID变化时，自动计算需要展开的路径。

import { useState, useEffect } from 'react';
import classNames from 'classnames';
import { FaAngleRight } from 'react-icons/fa';

const TreeView = ({ data, targetNodeId }) => {
  // 用Set存储需要展开的节点ID，方便快速查找
  const [expandedIds, setExpandedIds] = useState(new Set());

  // 当目标节点ID或数据源变化时，重新计算展开路径
  useEffect(() => {
    if (targetNodeId) {
      const path = findNodePath(data, targetNodeId);
      if (path) {
        setExpandedIds(new Set(path));
      }
    }
  }, [data, targetNodeId]);

  // 切换节点展开/折叠状态的回调
  const toggleExpand = (nodeId) => {
    setExpandedIds(prev => {
      const newSet = new Set(prev);
      newSet.has(nodeId) ? newSet.delete(nodeId) : newSet.add(nodeId);
      return newSet;
    });
  };

  return (
    <ul>
      {data.map(item => (
        <TreeNode 
          item={item} 
          key={item.id}
          isExpanded={expandedIds.has(item.id)}
          onToggle={() => toggleExpand(item.id)}
        />
      ))}
    </ul>
  );
};

3. 改造TreeNode为受控组件 #

现在TreeNode不再自己维护childVisible状态，而是接收父组件传入的isExpanded和onToggle回调，只负责渲染和触发交互。

const TreeNode = ({ item, isExpanded, onToggle }) => {
  const hasChildren = Boolean(item.children);
  const iconClass = classNames({
    iconDown: isExpanded
  });

  return (
    <li>
      <div className="flex-class" onClick={onToggle}>
        {hasChildren && <div className={iconClass}><FaAngleRight /></div>}
        {item.name}
      </div>
      {/* 只有当有子节点且处于展开状态时，才渲染子树 */}
      {hasChildren && isExpanded && <TreeView data={item.children} />}
    </li>
  );
};

4. 使用组件 #

现在你只需要在使用TreeView时传入targetNodeId，就能自动展开整条路径了：

// 示例树形数据
const sampleTreeData = [
  {
    id: 1,
    name: "系统设置",
    children: [
      {
        id: 2,
        name: "用户管理",
        children: [
          { id: 3, name: "权限配置" },
          { id: 4, name: "角色管理" }
        ]
      },
      { id: 5, name: "日志查看" }
    ]
  }
];

// 展开ID为3的节点，路径「系统设置→用户管理→权限配置」会自动展开
<TreeView data={sampleTreeData} targetNodeId={3} />

额外说明 #

• 如果需要支持动态修改targetNodeId，代码里的useEffect已经监听了targetNodeId的变化，会自动重新计算路径并更新展开状态。
• 如果你不需要展开目标节点本身（只展开父节点），可以在findNodePath函数里返回path而不是[...path, item.id]。

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