Material UI TreeView重载时如何通过nodeId展开到指定节点仅展开父级不展开全部

实现方案 #

要实现TreeView加载后自动展开到指定nodeId节点且仅展开其所有父级节点的需求，可以按以下逻辑改造代码：

1. 抽离树形结构为独立配置，方便遍历查找父级链路
2. 实现递归方法获取目标节点的所有祖先节点ID
3. 组件挂载时将祖先ID数组赋值给展开状态即可

完整代码 #

import React, { useState, useEffect } from 'react';
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem from '@material-ui/lab/TreeItem';

// 抽离树形结构配置
const treeData = [
  {
    nodeId: "1",
    label: "Applications",
    children: [
      { nodeId: "2", label: "Calendar" },
      { nodeId: "3", label: "Chrome" },
      { nodeId: "4", label: "Webstorm" }
    ]
  },
  {
    nodeId: "5",
    label: "Documents",
    children: [
      {
        nodeId: "6",
        label: "Material-UI",
        children: [
          {
            nodeId: "7",
            label: "src",
            children: [
              { nodeId: "8", label: "index.js" },
              { nodeId: "9", label: "tree-view.js" }
            ]
          }
        ]
      }
    ]
  }
];

// 递归获取目标节点的所有祖先节点ID
const getAncestorIds = (nodes, targetId, path = []) => {
  for (const node of nodes) {
    if (node.nodeId === targetId) return path;
    if (node.children) {
      const findResult = getAncestorIds(node.children, targetId, [...path, node.nodeId]);
      if (findResult) return findResult;
    }
  }
  return [];
};

// 递归渲染树节点
const renderTreeNodes = (nodes) => {
  return nodes.map(node => (
    <TreeItem key={node.nodeId} nodeId={node.nodeId} label={node.label}>
      {node.children ? renderTreeNodes(node.children) : null}
    </TreeItem>
  ));
};

export default function FileSystemNavigator() {
  const [expanded, setExpanded] = useState([]);

  useEffect(() => {
    // 传入目标nodeId 9，获取所有父级ID设置为展开状态
    const ancestorIds = getAncestorIds(treeData, "9");
    setExpanded(ancestorIds);
  }, []);

  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      expanded={expanded}
    >
      {renderTreeNodes(treeData)}
    </TreeView>
  );
}

运行后会仅展开Documents、Material-UI、src三个父节点，直接定位到nodeId 9的tree-view.js节点，其余无关节点保持折叠状态。

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