能帮我写一个react的树形吗
时间: 2023-11-22 18:55:09 浏览: 41
当然可以,以下是一个简单的React树形组件示例:
```javascript
import React, { useState } from 'react';
const TreeNode = ({ node }) => {
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
setIsOpen(!isOpen);
};
return (
<li>
<div onClick={handleToggle}>
{node.children ? (isOpen ? '👇' : '👉') : '🍂'}
{node.label}
</div>
{node.children && isOpen && (
<ul>
{node.children.map((child) => (
<TreeNode node={child} key={child.label} />
))}
</ul>
)}
</li>
);
};
const Tree = ({ data }) => (
<ul>
{data.map((node) => (
<TreeNode node={node} key={node.label} />
))}
</ul>
);
export default Tree;
```
这个组件接受一个数据对象数组(`data`),并根据数据对象数组构建树形结构。每个节点包含一个标签和可选的子节点数组。节点的展开/折叠状态由`isOpen`状态控制。当节点包含子节点时,单击节点将切换`isOpen`状态并显示或隐藏子节点。