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 组件库：

1. react-arborist
   功能丰富的树形组件，支持拖拽、虚拟滚动等高级功能：

   npm install react-arborist

2. rc-tree
   Ant Design 使用的底层树组件：

   npm install rc-tree

3. 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;
}