当前位置：首页 > React

react树状图实现

2026-01-26 20:02:18React

实现 React 树状图的方法

使用递归组件渲染树结构

递归组件是渲染树状结构的常见方法。通过组件调用自身实现嵌套渲染。

const TreeNode = ({ data }) => {
  return (
    <ul>
      {data.map((node) => (
        <li key={node.id}>
          {node.name}
          {node.children && <TreeNode data={node.children} />}
        </li>
      ))}
    </ul>
  );
};

使用第三方库 react-treeview

react-treeview 提供了现成的树状图组件，支持展开/折叠功能。

react树状图实现

npm install react-treeview

import TreeView from 'react-treeview';

const TreeComponent = ({ data }) => {
  return (
    <div>
      {data.map((node, i) => (
        <TreeView
          key={i}
          nodeLabel={node.name}
          defaultCollapsed={false}
        >
          {node.children && <TreeComponent data={node.children} />}
        </TreeView>
      ))}
    </div>
  );
};

自定义可交互树组件

实现一个支持点击展开/折叠的树组件，通过状态管理展开状态。

react树状图实现

import { useState } from 'react';

const TreeNode = ({ node }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <div onClick={() => setIsExpanded(!isExpanded)}>
        {node.children && (isExpanded ? '▼' : '►')} {node.name}
      </div>
      {isExpanded && node.children && (
        <div style={{ paddingLeft: '20px' }}>
          {node.children.map((child) => (
            <TreeNode key={child.id} node={child} />
          ))}
        </div>
      )}
    </div>
  );
};

使用 D3.js 集成

对于复杂的可视化需求，可以结合 D3.js 实现更专业的树状图。

npm install d3

import * as d3 from 'd3';
import { useEffect, useRef } from 'react';

const TreeChart = ({ data, width, height }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    svg.selectAll('*').remove();

    const root = d3.hierarchy(data);
    const treeLayout = d3.tree().size([width, height]);
    treeLayout(root);

    // 绘制节点和连线
    svg.selectAll('.link')
      .data(root.links())
      .enter()
      .append('path')
      .attr('class', 'link')
      .attr('d', d3.linkVertical()
        .x(d => d.x)
        .y(d => d.y));

    svg.selectAll('.node')
      .data(root.descendants())
      .enter()
      .append('g')
      .attr('class', 'node')
      .attr('transform', d => `translate(${d.x},${d.y})`)
      .append('circle')
      .attr('r', 5);
  }, [data, width, height]);

  return <svg ref={svgRef} width={width} height={height} />;
};

样式优化技巧

添加 CSS 样式可以增强树状图的可视化效果。

.tree-node {
  margin-left: 20px;
  cursor: pointer;
}

.tree-children {
  padding-left: 25px;
  border-left: 1px dashed #ccc;
}

.tree-toggle {
  margin-right: 5px;
  display: inline-block;
}

这些方法提供了从简单到复杂的 React 树状图实现方案，可以根据项目需求选择合适的实现方式。