React 中使用 react-org-tree 实现组织结构树

引言

在企业管理系统中，组织结构树是一个非常常见的功能需求。本文将详细介绍如何在 React 项目中使用 react-org-tree 组件来实现组织结构树的展示和交互。

安装依赖

首先，我们需要安装 react-org-tree 包：

bash 复制代码

npm install react-org-tree --save

或者使用 yarn：

bash 复制代码

yarn add react-org-tree

基本使用示例

数据准备

组织结构树需要特定格式的数据。通常后端返回的数据是扁平化的数组，我们需要将其转换为树形结构：

typescript 复制代码

// 工具函数：将扁平化数组转换为树形结构
export function filterArray(arr: any[], pid = 'parentId', id = 'id', children = 'children') {
  const obj: Record<string, any> = Object.create(null)
  const tree_arr: any[] = []
  
  arr.forEach(res => {
    obj[res[id]] = res
  })
  
  arr.map(res => {
    const parent = obj[res[pid]]
    if (parent) {
      if (!parent[children]) {
        parent[children] = []
      }
      parent[children].push(res)
    } else {
      tree_arr.push(res)
    }
  })
  
  return tree_arr
}

组件实现

tsx 复制代码

import React, { useState, useEffect } from "react";
import OrgTree from "react-org-tree";
import "./index.css";

export default function CompanyOrgChart() {
  const [treeData, setTreeData] = useState<any[]>([]);

  const handleClick = (e: any, nodeData: any) => {
    console.log("节点点击:", nodeData);
    // 处理节点点击逻辑
  };

  useEffect(() => {
    // 模拟从 API 获取数据
    const mockData = [
      { id: 1, name: '总公司', parentId: 0 },
      { id: 2, name: '分公司A', parentId: 1 },
      { id: 3, name: '分公司B', parentId: 1 },
      { id: 4, name: '部门A1', parentId: 2 },
      { id: 5, name: '部门A2', parentId: 2 },
    ];

    // 转换为树形结构
    const companyData = mockData.map(item => ({
      ...item,
      label: item.name,
      key: item.id
    }));

    setTreeData(filterArray(companyData));
  }, []);

  return (
    <div className="org-chart-container">
      {treeData.length > 0 &&
        treeData.map((item: any) => (
          <OrgTree
            key={item.key}
            data={item}
            horizontal={true}  // 水平布局
            collapsable={true}  // 可折叠
            expandAll={true}  // 默认展开所有节点
            onClick={handleClick}  // 点击事件
            labelWidth={249}  // 节点宽度
            labelClassName="org-node-label"  // 自定义样式类
          />
        ))}
    </div>
  );
}

关键属性说明

参数(prop)	说明(descripton)	类型(type)	默认值(default)
data	树结构数据	`Object`	{}
horizontal	是否横向	`Boolean`	`false`
collapsable	是否可折叠	`Boolean`	`false`
expandAll	是否展开全部	`Boolean`	`false`
labelWidth	树节点宽度	`Number`	`auto`
labelClassName	树节点样式	`String`	`white`
onClick	点击事件	Function(e:Event, data)

样式自定义

创建 index.css 文件来自定义节点样式：

css 复制代码

.org-chart-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 400px;
}

.org-node-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.org-node-label:hover {
  background: #e6f7ff;
  border-color: #91d5ff;
}

常见问题

Q1: 数据格式不正确导致树形不显示

原因：react-org-tree 需要特定的数据格式，必须包含 label 和 key 字段，子节点需要放在 children 数组中。

解决：确保数据转换正确，使用 filterArray 工具函数将扁平化数据转换为树形结构。

Q2: 节点点击事件不触发

原因：onClick 属性需要传入正确的回调函数。

解决：确保传入的是函数引用，而非函数调用。

Q3: 样式不生效

原因：CSS 文件未正确导入或样式选择器不正确。

解决：确保导入了 CSS 文件，并使用正确的样式类名。

总结

react-org-tree 是一个轻量级的组织结构树组件，使用简单，配置灵活。通过本文的介绍，相信你已经掌握了在 React项目中使用 react-org-tree 的基本方法和技巧。

如果你有任何问题或建议，欢迎在评论区留言讨论！