React-orgchart 是一个基于 React 的组织架构图库，它可以帮助前端开发人员快速构建漂亮而且功能强大的组织架构图，支持自定义节点样式、节点点击事件等。
安装
你可以使用 npm 或 yarn 安装 react-orgchart 包：
npm install react-orgchart # 或 yarn add react-orgchart
怎么使用
首先，你需要在你的项目中引入 React-orgchart：
import OrgChart from 'react-orgchart'
然后，你可以使用以下代码来渲染一个基本的组织架构图：
-- -------------------- ---- -------
----- ------- - -- -- -
----- ---- - -
----- ----- -------
------ ------
--------- -
- ----- ----- ------- ------ --- ---------- --
-
----- ---- ---------
------ --- ------------
--------- -
- ----- ----- ------- ------ --------- --
- ----- ---- -------- ------ --------- --
--
--
--
-
------ --------- ----------- --
-高级使用
React-orgchart 还支持一些高级用法，如自定义节点样式、节点点击事件等。
自定义节点样式
你可以通过 nodeContentRenderer 属性来自定义每个节点的样式。这个属性需要传入一个函数组件，接收一个 node 属性，返回一个 React 元素。
例如，以下代码将节点样式改为了圆角矩形：
-- -------------------- ---- -------
----- --------------- - -- ---- -- -- -
---- -------- ---------------- -------- ------- ---- ----- ----------- ------------- ------ -------- ------ ------ ------- ---
---- -------- ----------- ------- --------- ------ --------------------
---- -------- --------- ------ ---------------------
------
-
----- ------- - -- -- -
----- ---- - -
----- ----- -------
------ ------
--------- -
- ----- ----- ------- ------ --- ---------- --
-
----- ---- ---------
------ --- ------------
--------- -
- ----- ----- ------- ------ --------- --
- ----- ---- -------- ------ --------- --
--
--
--
-
------ --------- ----------- ------------------------------------- --
-节点点击事件
React-orgchart 提供了一个 onNodeClick 属性来处理节点点击事件。这个属性需要传入一个函数，接收一个 node 属性和一个 event 事件对象。
例如，以下代码会在点击节点时弹出节点信息：
-- -------------------- ---- -------
----- ------- - -- -- -
----- --------------- - ------ ------ -- -
----------- ------------ -----
-
----- ---- - -
----- ----- -------
------ ------
--------- -
- ----- ----- ------- ------ --- ---------- --
-
----- ---- ---------
------ --- ------------
--------- -
- ----- ----- ------- ------ --------- --
- ----- ---- -------- ------ --------- --
--
--
--
-
------ --------- ----------- ----------------------------- --
-示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ -------- ---- ----------------
----- --------------- - -- ---- -- -- -
---- -------- ---------------- -------- ------- ---- ----- ----------- ------------- ------ -------- ------ ------ ------- ---
---- -------- ----------- ------- --------- ------ --------------------
---- -------- --------- ------ ---------------------
------
-
----- ------- - -- -- -
----- --------------- - ------ ------ -- -
----------- ------------ -----
-
----- ---- - -
----- ----- -------
------ ------
--------- -
- ----- ----- ------- ------ --- ---------- --
-
----- ---- ---------
------ --- ------------
--------- -
- ----- ----- ------- ------ --------- --
- ----- ---- -------- ------ --------- --
--
--
--
-
------ --------- ----------- ------------------------------------- ----------------------------- --
-
------ ------- -------结语
React-orgchart 是一个轻量而强大的组织架构图库，可以帮助前端开发人员快速构建漂亮而且功能强大的组织架构图。而且它的使用方法也非常简单，只需要几行代码就可以完成一个基本的组织架构图。如果你正在开发一个组织架构图相关的项目，那么 React-orgchart 绝对是你不可错过的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3548