Arco Design Tree组件选中节点后怎么获取完整路径？

UP主～艳杰提问于 2026-03-19 21:02:23 阅读 59

组件

我用 Arco Design 的 Tree 组件做了一个菜单选择功能，现在想在用户点击某个节点时拿到从根到该节点的完整路径（比如 [‘parent’, ‘child’, ‘current’]），但文档里没找到直接的方法。

试过 onSelect 回调里的 selectedKeys 和 node 参数，但只能拿到当前节点信息，没法往上追溯父级。难道要自己遍历整棵树找路径？有没有更简单的方式？

这是我的数据结构：

const treeData = [
  {
    key: '1',
    title: 'Parent',
    children: [
      {
        key: '2',
        title: 'Child',
        children: [
          { key: '3', title: 'Current' }
        ]
      }
    ]
  }
];

我来解答赞 10 收藏

反馈

2 条解答

打工人怡博 Lv1

首先你要知道 Arco Design 的 Tree 组件本身并没有提供直接获取从根到当前节点完整路径的方法，所以确实需要我们手动去实现这个功能。我们可以利用递归的方式来遍历树结构，找到目标节点并记录下路径。

首先你要定义一个递归函数，这个函数会在树中查找指定的节点，并且在找到的同时记录下路径。接下来我们来看一下具体的实现步骤。

第一步，我们需要定义一个递归函数来查找目标节点，并记录路径。这个函数会接受三个参数：当前节点、目标节点的 key、以及记录路径的数组。我们会在函数内部检查当前节点是否是目标节点，如果是的话就返回 true 表示找到了；如果不是的话，我们就继续递归地查找它的子节点。每次递归调用前，我们将当前节点添加到路径数组中，如果子节点递归调用返回了 true，说明已经找到了目标节点，我们就可以停止递归并返回 true。如果子节点递归调用都返回了 false，说明当前节点的子树中不包含目标节点，我们需要将当前节点从路径数组中移除，然后再返回 false。

第二步，在 Tree 组件的 onSelect 回调中调用我们定义的递归函数。当用户选择了一个节点后，我们会得到这个节点的 key，然后就可以调用我们的递归函数来查找这个节点，并获取从根到该节点的路径。

下面是一个完整的代码示例，包含了上述的两个步骤：

pre class="pure-highlightjs line-numbers">

import React, { useState } from 'react';

import { Tree } from '@arco-design/web-react';



const treeData = [

  {

    key: '1',

    title: 'Parent',

    children: [

      {

        key: '2',

        title: 'Child',

        children: [

          { key: '3', title: 'Current' }

        ]

      }

    ]

  }

];



function findPath(tree, targetKey, path) {

  // 将当前节点添加到路径数组中

  path.push(tree.title);



  // 检查当前节点是否是目标节点

  if (tree.key === targetKey) {

    return true;

  }



  // 遍历子节点

  if (tree.children) {

    for (let child of tree.children) {

      if (findPath(child, targetKey, path)) {

        return true;

      }

    }

  }



  // 如果没有找到目标节点，从路径数组中移除当前节点

  path.pop();

  return false;

}



function App() {

  const [path, setPath] = useState([]);



  const handleSelect = (selectedKeys, node) => {

    const path = [];

    for (let item of treeData) {

      if (findPath(item, selectedKeys[0], path)) {

        break;

      }

    }

    setPath(path);

    console.log('Selected Path:', path);

  };



  return (

    

      

      Selected Path: {path.join(' -> ')}


    


  );

}



export default App;

在这个代码示例中，我们首先定义了 findPath 函数来查找目标节点并记录路径。然后在 App 组件中使用了 Arco Design 的 Tree 组件，并在 onSelect 回调中调用了 findPath 函数来获取路径。最后，我们在页面上显示了选中的路径。

这样，每当用户选择一个节点时，我们就能获取到从根节点到当前节点的完整路径了。希望这个解决方案对你有帮助。

2026-03-23 12:03

司徒彦杰 Lv1

直接上代码，预先处理一下就行：

import { Tree } from '@arco-design/web-react';



// 先把树展平，构建 key -> 完整路径 的映射

const buildPathMap = (data, parentPath = []) => {

  const map = {};

  

  data.forEach(node => {

    const currentPath = [...parentPath, node.key];

    map[node.key] = currentPath;

    

    if (node.children) {

      Object.assign(map, buildPathMap(node.children, currentPath));

    }

  });

  

  return map;

};



// 组件中

const pathMap = buildPathMap(treeData);



const handleSelect = (selectedKeys) => {

  const fullPath = pathMap[selectedKeys[0]];

  console.log(fullPath); // ['1', '2', '3']

};



return (

  <Tree

    treeData={treeData}

    onSelect={handleSelect}

  />

);

如果想拿到 title 路径而不是 key，改一下就行：

const buildTitlePathMap = (data, parentPath = []) => {

  const map = {};

  

  data.forEach(node => {

    const currentPath = [...parentPath, node.title];

    map[node.key] = currentPath;

    

    if (node.children) {

      Object.assign(map, buildTitlePathMap(node.children, currentPath));

    }

  });

  

  return map;

};

这样点击 'Current' 节点时就能拿到 ['Parent', 'Child', 'Current']。

原理很简单：初始化时把整棵树拍平，每个 key 对应它的完整路径链，点击时直接查 Map，O(1) 复杂度，比每次都去遍历树快多了。

2026-03-19 21:03