当前位置：首页 > React

react实现树形表格

2026-01-27 05:22:15React

实现树形表格的基本思路

使用React实现树形表格需要结合递归组件和状态管理。树形数据通常包含嵌套结构，每个节点可能有子节点，表格需要动态渲染这些层级关系。

数据结构设计

树形表格的数据通常是一个嵌套对象数组，每个对象代表一个节点，包含唯一标识、显示内容及子节点信息。示例数据结构如下：

const treeData = [
  {
    id: '1',
    name: 'Parent 1',
    children: [
      {
        id: '1-1',
        name: 'Child 1-1',
        children: [
          { id: '1-1-1', name: 'Grandchild 1-1-1' }
        ]
      }
    ]
  }
];

递归组件实现

创建一个递归组件TreeNode，用于渲染每个节点及其子节点。组件根据节点的children属性判断是否需要继续递归。

const TreeNode = ({ node, level = 0 }) => {
  return (
    <>
      <tr>
        <td style={{ paddingLeft: `${level * 20}px` }}>
          {node.name}
        </td>
      </tr>
      {node.children?.map(child => (
        <TreeNode key={child.id} node={child} level={level + 1} />
      ))}
    </>
  );
};

状态管理与展开/折叠

通过expanded状态控制子节点的显示与隐藏。点击节点时切换展开状态。

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

  return (
    <>
      <tr>
        <td style={{ paddingLeft: `${level * 20}px` }}>
          {node.children && (
            <button onClick={() => setExpanded(!expanded)}>
              {expanded ? '−' : '+'}
            </button>
          )}
          {node.name}
        </td>
      </tr>
      {expanded && node.children?.map(child => (
        <TreeNode key={child.id} node={child} level={level + 1} />
      ))}
    </>
  );
};

完整表格集成

将递归组件集成到表格中，并通过treeData渲染整个树形结构。

const TreeTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {data.map(node => (
          <TreeNode key={node.id} node={node} />
        ))}
      </tbody>
    </table>
  );
};