Antd Tree搜索时无法展开子列表子项问题求助

问题现状 #

• 搜索时三级及更深层级的子项无法展开
• 搜索结果未自动展开匹配项所在的父节点路径
• 未过滤掉完全不包含匹配关键词的节点及子树

解决方案 #

核心思路是通过递归处理树结构，同时完成节点过滤和展开节点收集两个操作：

1. 实现递归过滤与展开节点收集函数 #

该函数会遍历整个树，保留包含关键词的节点、以及所有包含匹配子节点的父节点，同时记录这些父节点的key用于展开：

// 递归过滤树节点，同步收集需要展开的父节点key
const filterTreeNodes = (nodes, keyword, expandedKeys = new Set()) => {
  return nodes.reduce((acc, node) => {
    // 检查当前节点是否匹配关键词
    const nodeMatches = node.title.includes(keyword);
    // 递归处理子节点
    const filteredChildren = node.children ? filterTreeNodes(node.children, keyword, expandedKeys) : [];
    // 当前节点匹配 或 有匹配的子节点，则保留该节点
    if (nodeMatches || filteredChildren.length > 0) {
      expandedKeys.add(node.key);
      acc.push({
        ...node,
        // 仅保留有匹配项的子节点，否则移除children属性
        children: filteredChildren.length > 0 ? filteredChildren : undefined
      });
    }
    return acc;
  }, []);
};

2. 修改搜索事件处理逻辑 #

在搜索时调用上述函数，更新过滤后的树数据和展开节点集合：

const handleSearch = (value) => {
  const expandedKeysSet = new Set();
  const filteredTree = filterTreeNodes(originalTreeData, value, expandedKeysSet);
  // 更新树数据
  setTreeData(filteredTree);
  // 更新展开节点（转换为数组）
  setExpandedKeys(Array.from(expandedKeysSet));
};

3. 配置Tree组件属性 #

确保Tree组件使用受控的treeData和expandedKeys：

<Tree
  treeData={treeData}
  expandedKeys={expandedKeys}
  onExpand={(keys) => setExpandedKeys(keys)}
  // 其他属性保持不变
/>

效果说明 #

• 搜索后自动展开所有包含匹配项的父节点路径，包括三级及更深层级
• 完全不匹配的节点及子树会被过滤掉，仅保留相关的节点路径
• 子节点匹配时，其父节点会被保留并展开，确保匹配项可见

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