<think>嗯，用户想在Ant Design的
Tree组件里添加搜索
功能。我之前看过几个相
关的引用，比如引用1提到如何扩展
TreeNode
组件，引用4和5讨论了
Tree组件的样式和图标自定义。可能需要结合这些知识点来实现搜索
功能。
首先，搜索
功能一般包括输入框和过滤树节点。用户输入
关键词后，需要遍历所有节点，找到匹配的节点，并展开其父节点以便显示。记得Ant Design的
Tree组件支持受控的expandedKeys和checkedKeys，可能需要用这些属性来控制展开状态。
然后，过滤逻辑方面，可能需要递归检查每个节点的title是否包含
关键词。如果某个节点匹配，其所有祖先节点都需要展开。这时候可以用一个递归函数来收集需要展开的节点key。例如，遍历树数据，检查每个节点及其子节点，符合条件的节点及其父节点的key都要添加到expandedKeys中。
接下来是代码结构。用户需要引入Input
组件作为搜索框，
Tree组件绑定expandedKeys和checkedKeys。在过滤函数中，处理树数据并更新expandedKeys和filteredData。可能还需要使用useState来管理状态，比如expandedKeys、searchValue和filteredData。
样式方面，引用4提到了自定义样式的方法，可能需要在
Tree组件上添加className来调整缩进或其他样式。但用户的问题主要是
功能实现，所以样式部分可能暂时不需要处理。
另外，引用5中
关于自定义图标的部分可能和搜索
功能无
关，但可以忽略。
关键点是根据搜索值过滤节点并控制展开状态。需要注意的是，处理树形数据时可能需要深拷贝原始数据，避免直接修改原始数据。
最后，示例代码需要展示如何结合Input和
Tree组件，使用onChange事件触发过滤函数，并更新状态。还要处理节点是否显示的逻辑，比如在title中使用Highlighter来高亮匹配的文本。同时，要确保展开的节点正确更新，以便用户能看到过滤后的结果。
可能还需要考虑性能问题，比如大量数据时的处理，但用户提供的示例可能比较简单，暂时不需要优化。总之，步骤是：添加输入框，编写过滤函数，控制展开状态，更新
Tree组件的属性和数据。</think>### 在 Ant Design
Tree 组件中添加搜索
功能的实现方法
#### 实现思路
1. **输入框与状态管理**：添加输入框
组件用于接收
关键词，通过
React 状态管理 `searchValue` 和 `filteredData`
2. **节点过滤逻辑**：递归遍历树形数据，保留匹配节点的完整路径
3. **展开节点控制**：动态更新 `expandedKeys` 确保匹配节点的父级路径展开
4. **高亮匹配文本**：使用 `
React.
ReactNode` 渲染带样式的高亮文本
#### 示例代码
```tsx
import {
Tree, Input } from '
antd';
import { useState } from '
react';
const Searchable
Tree = ({
treeData }) => {
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
const [searchValue, setSearchValue] = useState('');
const [filteredData, setFilteredData] = useState(
treeData);
const filter
Tree = (data: any[], value: string, parentKeys: string[] = []): any[] => {
return data.map(node => {
const children = node.children ? filter
Tree(node.children, value, [...parentKeys, node.key]) : [];
const isMatch = node.title.toLowerCase().includes(value.toLowerCase());
if (isMatch || children.length > 0) {
setExpandedKeys(prev => [...new Set([...prev, ...parentKeys])]);
return {
...node,
title: isMatch ? <Highlighter text={node.title} keyword={value} /> : node.title,
children
};
}
return null;
}).filter(Boolean);
};
const handleSearch = (e:
React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearchValue(value);
setFilteredData(filter
Tree(JSON.parse(JSON.stringify(
treeData)), value));
};
return (
<div>
<Input.Search
placeholder="搜索节点"
onChange={handleSearch}
style={{ marginBottom: 8 }}
/>
<
Tree
treeData={filteredData}
expandedKeys={expandedKeys}
onExpand={keys => setExpandedKeys(keys as string[])}
/>
</div>
);
};
// 高亮
组件
const Highlighter = ({ text, keyword }) => {
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
return (
<span>
{parts.map((part, i) =>
part.toLowerCase() === keyword.toLowerCase() ?
<span style={{ backgroundColor: '#ffc069' }} key={i}>{part}</span> :
part
)}
</span>
);
};
```
####
关键实现说明
1. **数据克隆**：使用 `JSON.parse(JSON.stringify())` 创建数据副本避免污染原始数据[^1]
2. **递归过滤**：`filter
Tree` 函数同时完成匹配检测和展开路径收集
3. **展开控制**：通过 `setExpandedKeys` 动态维护需要展开的节点集合
4. **性能优化**：建议对大数据量场景添加防抖处理（示例未包含）
#### 样式调整建议
可通过覆盖
Tree 组件的 CSS 类名实现自定义缩进：
```scss
.custom-
tree {
.ant-
tree-
treenode {
padding: 4px 0;
}
.ant-
tree-indent-unit {
width: 16px !important;
}
}
```
（在
组件中通过 `className="custom-
tree"` 应用样式）[^4]
扫一扫
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
