react实现tree
React 实现 Tree 组件
使用 React 实现 Tree 组件可以通过递归渲染节点或使用第三方库简化开发。以下是两种常见方法：
递归组件实现
递归方式适合处理嵌套的树形数据，通过组件调用自身渲染子节点。
const TreeNode = ({ node }) => {
return (
<li>
<span>{node.name}</span>
{node.children && (
<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",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" }
]
}
];
<Tree data={treeData} />使用第三方库
对于复杂需求，推荐使用成熟的 Tree 组件库：
-
react-arborist
功能丰富的树形组件，支持拖拽、虚拟滚动等高级功能：
npm install react-arborist -
rc-tree
Ant Design 使用的底层树组件：npm install rc-tree -
react-sortable-tree
支持拖拽排序的树组件：
npm install react-sortable-tree
性能优化技巧
对于大型树结构，建议实施以下优化：
- 虚拟滚动（只渲染可见节点）
- 节点懒加载（动态加载子节点）
- 使用
React.memo避免不必要的重渲染 - 实现节点展开/折叠状态管理
状态管理方案
树组件通常需要管理展开/折叠状态：
const TreeNode = ({ node }) => {
const [isExpanded, setIsExpanded] = useState(false);
return (
<li>
<span onClick={() => setIsExpanded(!isExpanded)}>
{node.children ? (isExpanded ? "[-]" : "[+]") : ""} {node.name}
</span>
{isExpanded && node.children && (
<ul>
{node.children.map(child => (
<TreeNode key={child.id} node={child} />
))}
</ul>
)}
</li>
);
};样式定制建议
通过 CSS 可以增强树组件的视觉效果：
ul {
list-style-type: none;
padding-left: 20px;
}
li {
margin: 5px 0;
cursor: pointer;
}
span:hover {
background-color: #f0f0f0;
}
