当前位置：首页 > React

react如何收起树

2026-02-26 15:46:02React

收起树形结构的实现方法

在React中收起树形结构通常涉及状态管理和递归渲染。以下是几种常见实现方式：

使用状态管理展开/收起状态

为每个树节点维护一个isExpanded状态，通过点击事件切换该状态：

function 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 => (
        <TreeNode key={child.id} node={child} />
      ))}
    </div>
  );
}

使用递归组件实现完整树结构

对于多层嵌套的树形数据，递归组件是最直接的实现方式：

function Tree({ data }) {
  return (
    <ul>
      {data.map(item => (
        <TreeNode key={item.id} node={item} />
      ))}
    </ul>
  );
}

function TreeNode({ node }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <li>
      <div onClick={() => setExpanded(!expanded)}>
        {node.children && (
          <span>{expanded ? '▼' : '▶'}</span>
        )}
        {node.label}
      </div>
      {expanded && node.children && (
        <Tree data={node.children} />
      )}
    </li>
  );
}

使用第三方库

对于复杂树形结构，可以考虑使用专门库如：

react-arborist：高性能树形组件
react-treebeard：可定制的树形视图
rc-tree：Ant Design的树组件基础实现

安装示例：

npm install react-treebeard

使用示例：

import { Treebeard } from 'react-treebeard';

function MyTree() {
  const [cursor, setCursor] = useState(null);
  const [data, setData] = useState(/* 树形数据 */);

  const onToggle = (node, toggled) => {
    node.active = true;
    node.toggled = toggled;
    setCursor(node);
    setData({ ...data });
  };

  return <Treebeard data={data} onToggle={onToggle} />;
}

性能优化建议

对于大型树结构，应考虑以下优化：

虚拟滚动（只渲染可视区域节点）
记忆化子组件（React.memo）
避免不必要的状态更新
使用不可变数据更新

虚拟滚动示例：

import { VariableSizeTree as Tree } from 'react-vtree';

function* treeWalker(refresh) {
  // 生成树形数据的迭代器
}

function TreeNode({ data, isOpen, style }) {
  return (
    <div style={style}>
      <button onClick={() => data.setOpen(!isOpen)}>
        {isOpen ? '▼' : '▶'}
      </button>
      {data.name}
    </div>
  );
}

function BigTree() {
  return (
    <Tree treeWalker={treeWalker} itemSize={30}>
      {TreeNode}
    </Tree>
  );
}

以上方法可以根据具体需求选择使用，简单交互建议使用原生状态管理，复杂场景推荐采用专门优化过的树形组件库。

react如何收起树