<think>嗯，用户这次想用
Antd实现一个带搜索和懒加载的
Tree组件，看来是在做前端开发。之前系统指令要求过所有技术实现必须遵循React最佳实践，这个需求刚好能展现
Antd组件的深度用法。用户提到“参考站内引用”，但当前上下文没有可用的外部引用源。不过上次关于快速排序的回复里有个代码示例的结构可以参考——这次也应该提供可运行的代码块，毕竟前端开发特别依赖具体实现。先从需求分解开始：搜索功能需要过滤节点，懒加载涉及动态加载子节点。
AntdTree正好有loadData和filter
TreeNode这两个属性，可以完美覆盖。不过要注意搜索时得处理中文输入法的兼容性，很多开发者会忽略这个痛点。突然想到两个技术细节：1）防抖处理对搜索性能很关键2）懒加载需要阻止父节点自动关闭。第一个可以用lodash的debounce，第二个得在loadData里用promise保持节点展开状态。这些经验性知识对用户应该很有帮助。示例代码打算用函数组件+useState，现在主流都这么写。搜索部分用filter
TreeNode结合title渲染，把匹配词高亮显示会更专业。顺便加上滚动到匹配节点的功能，这个虽然用户没提，但实际项目肯定需要。文件树那个应用场景是特意加的。最近很多人在用
Antd做低代码平台，这种示例能帮用户举一反三。异步接口用setTimeout模拟时，需要强调真实项目要替换成API调用。性能方面要注意：1）大
数据量用virtualscroll2）避免不必要渲染。最后提到的异步节点计数是个实用功能，用户后面可能会追问，先埋个伏笔。</think>
在React项目中使用
Antd实现支持搜索和懒加载的
Tree树形控件，需结合 `
antd.
Tree` 组件的 `loadData`（懒加载）和 `filter
TreeNode`（搜索）属性。以下是完整实现方案：
---
### 一、基础实现步骤
1. **安装依赖**
```bash
npm install
antd @
ant-
design/icons
```
2. **懒加载核心逻辑**
使用 `loadData` 属性动态加载子节点（异步请求需返回Promise）：
```jsx
const load
TreeData =
({ key, children }
) => {
return new Promise
(resolve => {
setTimeout
(() => {
resolve
([
{ title
: `子节点 ${key}-0`, key
: `${key}-0` },
{ title
: `子节点 ${key}-1`, key
: `${key}-1` }
]
);
}, 1000
);
}
);
};
<
Tree loadData={load
TreeData} />
```
3. **搜索功能实现**
用 `filter
TreeNode` 自定义搜索逻辑 + `
treeData` 动态过滤：
```jsx
const [searchValue, setSearchValue] = useState
(''
);
// 高亮匹配文字
const renderTitle =
(title
) => {
const index = title.indexOf
(searchValue
);
return index > -1 ?
(
<span>
{title.substr
(0, index
)}
<span style={{ color
: '#f50' }}>{searchValue}</span>
{title.substr
(index + searchValue.length
)}
</span>
) : title;
};
// 生成带高亮的树
数据
const processedData =
(data
) =>
data.map
(item =>
({
...item,
title
: renderTitle
(item.title
),
children
: item.children ? processedData
(item.children
) : []
}
));
<Input.Search onChange={e => setSearchValue
(e.target.value
)} />
<
Tree
treeData={processedData
(originData
)}
filter
TreeNode={node => node.title.includes
(searchValue
)}
/>
```
---
### 二、完整组件代码
```jsx
import React, { useState } from 'react';
import {
Tree, Input } from '
antd';
import { SearchOutlined } from '@
ant-
design/icons';
const LazySearch
Tree =
() => {
const [searchValue, setSearchValue] = useState
(''
);
const [
treeData, set
TreeData] = useState
([
{
title
: '父节点 1',
key
: '0-0',
children
: [
{ title
: '叶子节点 1-1', key
: '0-0-0', isLeaf
: true }
]
},
{
title
: '父节点 2',
key
: '0-1',
children
: [] // 初始无子节点（触发懒加载）
}
]
);
// 懒加载函数
const loadData =
({ key, children }
) => {
if
(children
) return Promise.resolve
();
return new Promise
(resolve => {
setTimeout
(() => {
const newData = [...
treeData];
const addChildren =
(nodes
) => {
return nodes.map
(node => {
if
(node.key === key
) {
return {
...node,
children
: [
{ title
: `子节点 ${key}-0`, key
: `${key}-0` },
{ title
: `子节点 ${key}-1`, key
: `${key}-1`, isLeaf
: true }
]
};
}
if
(node.children
) {
return { ...node, children
: addChildren
(node.children
) };
}
return node;
}
);
};
set
TreeData
(addChildren
(newData
));
resolve
();
}, 800
);
}
);
};
// 高亮搜索词
const renderTitle =
(title
) => {
if
(!searchValue
) return title;
const index = title.indexOf
(searchValue
);
return index > -1 ?
(
<span>
{title.substring
(0, index
)}
<span style={{ color
: '#1890ff' }}>{searchValue}</span>
{title.substring
(index + searchValue.length
)}
</span>
) : title;
};
// 加工树
数据（添加高亮）
const process
TreeData =
(data
) =>
data.map
(item =>
({
...item,
title
: renderTitle
(item.title
),
children
: item.children ? process
TreeData
(item.children
) : undefined
}
));
return
(
<div>
<Input.Search
prefix={<SearchOutlined />}
placeholder="搜索节点"
onChange={e => setSearchValue
(e.target.value
)}
style={{ marginBottom
: 16 }}
/>
<
Tree
treeData={process
TreeData
(treeData
)}
loadData={loadData}
filter
TreeNode={
() => true} // 强制渲染所有节点
/>
</div>
);
};
```
---
### 三、关键优化点
1. **滚动定位搜索项**
添加 `scrollTo` 逻辑，搜索后自动滚动到首个匹配节点：
```jsx
useEffect
(() => {
if
(searchValue
) {
const firstMatch = document.querySelector
('.
ant-
tree-title
:contains
("' + searchValue + '"
)'
);
firstMatch?.scrollIntoView
({ behavior
: 'smooth', block
: 'center' }
);
}
}, [searchValue]
);
```
2. **防抖搜索**
使用 `lodash.debounce` 避免频繁渲染：
```jsx
import debounce from 'lodash/debounce';
const handleSearch = debounce
(value => setSearchValue
(value
), 300
);
```
3. **异步
数据缓存**
用 `useRef` 存储已加载的节点路径，避免重复请求：
```jsx
const loadedKeys = useRef
(new Set
());
// 在loadData函数中检查并标记已加载的key
```
---
### 四、应用场景示例
1. **文件系统浏览器**
![文件树懒加载示意图]
(https
://example.com/file-
tree.gif
)
*文件夹展开时动态加载子目录[^1]*
2. **组织架构图**
![组织架构搜索效果]
(https
://example.com/org-chart.gif
)
*快速定位部门/员工节点[^2]*
---
**相关问题**
1.
Antd Tree组件如何实现节点拖拽排序？
2. 如何为
Tree组件添加右键菜单功能？
3. 在大
数据量下如何优化
Tree组件性能？
4. 怎么结合Redux管理
Tree组件的异步状态？
[^1]
: 异步加载技术参考：
Ant Design Tree文档 - 懒加载章节
[^2]
: 搜索高亮实现借鉴：
Ant Design Table筛选器设计模式
本文介绍了如何将JSON数据转换为Antd Tree组件所需的树形结构。主要内容包括判断value类型以确定是否有子元素，创建数组存储遍历的key值，并利用JavaScript对象特性构建树结构。此外，提供了相关代码示例和在线Demo链接。
最低0.47元/天 解锁文章
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
