react简单实现树形控件
实现树形控件的基本思路
树形控件的核心是递归渲染节点，每个节点可以包含子节点。通过状态管理展开/折叠状态，动态渲染可见部分。
基础代码结构
创建一个可复用的树形组件，包含以下关键部分：
import React, { useState } from 'react';
const TreeNode = ({ node }) => {
const [isExpanded, setIsExpanded] = useState(false);
const hasChildren = node.children && node.children.length > 0;
return (
<li>
<div onClick={() => setIsExpanded(!isExpanded)}>
{hasChildren && (
<span>{isExpanded ? '▼' : '▶'}</span>
)}
{node.name}
</div>
{hasChildren && isExpanded && (
<ul>
{node.children.map(child => (
<TreeNode key={child.id} node={child} />
))}
</ul>
)}
</li>
);
};
const Tree = ({ data }) => {
return (
<ul>
{data.map(node => (
<TreeNode key={node.id} node={node} />
))}
</ul>
);
};使用示例
const treeData = [
{
id: 1,
name: 'Parent 1',
children: [
{
id: 2,
name: 'Child 1',
children: [
{ id: 3, name: 'Grandchild 1' },
{ id: 4, name: 'Grandchild 2' }
]
},
{ id: 5, name: 'Child 2' }
]
},
{
id: 6,
name: 'Parent 2'
}
];
function App() {
return (
<div>
<h1>Tree Component</h1>
<Tree data={treeData} />
</div>
);
}样式增强
添加基础CSS样式提升视觉效果：
ul {
list-style: none;
padding-left: 20px;
}
li {
margin: 5px 0;
}
div {
cursor: pointer;
padding: 2px 5px;
}
div:hover {
background-color: #f0f0f0;
}功能扩展方向
- 复选框支持：为每个节点添加复选框，实现全选/取消功能
- 搜索过滤：根据输入内容动态过滤显示匹配节点
- 拖拽排序：实现节点拖拽重新排序功能
- 异步加载：节点展开时动态加载子节点数据
- 自定义图标：替换默认箭头为更美观的图标
性能优化建议
对于大型树结构，考虑以下优化：
- 虚拟滚动技术，只渲染可见区域节点
- 使用React.memo避免不必要的重新渲染
- 数据懒加载，初始只加载顶层节点
这种实现方式提供了树形控件的基础功能，可以根据具体需求进行扩展和定制。
