react如何收起树
收起树结构的实现方法
在React中实现树的收起/展开功能，通常需要结合状态管理和递归组件。以下是几种常见实现方式：
使用递归组件
创建树形组件时，每个节点管理自己的展开状态：
const TreeNode = ({ node }) => {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div>
<div onClick={() => setIsExpanded(!isExpanded)}>
{node.name}
{node.children && <span>{isExpanded ? '[-]' : '[+]'}</span>}
</div>
{isExpanded && node.children?.map(child => (
<div style={{ marginLeft: '20px' }} key={child.id}>
<TreeNode node={child} />
</div>
))}
</div>
);
};集中式状态管理
当需要全局控制树的展开状态时，可以使用Context或Redux：
const TreeContext = createContext();
const Tree = ({ data }) => {
const [expandedNodes, setExpandedNodes] = useState(new Set());
const toggleNode = (nodeId) => {
setExpandedNodes(prev => {
const newSet = new Set(prev);
newSet.has(nodeId) ? newSet.delete(nodeId) : newSet.add(nodeId);
return newSet;
});
};
return (
<TreeContext.Provider value={{ expandedNodes, toggleNode }}>
<TreeNode node={data} />
</TreeContext.Provider>
);
};添加收起全部功能
在父组件中添加控制全部节点的逻辑：
const Tree = ({ data }) => {
const [expandedNodes, setExpandedNodes] = useState(new Set());
const collapseAll = () => setExpandedNodes(new Set());
return (
<div>
<button onClick={collapseAll}>收起全部</button>
<TreeContext.Provider value={{ expandedNodes, toggleNode }}>
<TreeNode node={data} />
</TreeContext.Provider>
</div>
);
};性能优化建议
对于大型树结构，考虑以下优化措施：
- 使用虚拟滚动技术（如react-window）只渲染可见节点
- 对节点使用React.memo进行记忆化
- 懒加载子节点数据
第三方库方案
现有成熟库可直接使用：
- react-arborist：专业的树形组件库
- rc-tree：Ant Design使用的树组件
- react-sortable-tree：支持拖拽排序的树
import { Tree } from 'antd';
const App = () => (
<Tree
treeData={data}
defaultExpandAll={false}
/>
);
