在工业和商业生产中，许多流程类型的任务需要进行流程图的绘制和展示，这时候 react-dag 库就能帮助我们快速实现相关功能。本文将对 react-dag 库的使用进行详细介绍。
安装
在使用 react-dag 前需要先安装 react 和 react-dom
npm install react react-dom --save
接着，我们需要安装 react-dag 就可以直接使用它了。
npm install react-dag --save
在开始使用 react-dag 前，请确保您已经熟悉 React 环境中增加生态包，并且了解 TypeScript 基础知识。
搭建出第一张流程图
本章节将介绍如何创建第一张流程图。我们将使用 react-dag 提供的基本组件和基本配置来快速创建一个简单流程图。
使用 ReactDAG
ReactDAG 组件表示整个流程图容器。您可以将它集成到您的 React 应用中的任何位置。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------
-------- ----- -
------ -
--------- --------- -- ------------------------
---- -------- ------ -------- ------- -------- ----------- -------- ---
----- -----
------
-----------
--
-
------ ------- ----在上述示例中，我们将一个 div 标签元素放置在 ReactDAG 组件之内。
现在，我们需要添加可拖动节点，这些节点能够被我们设置并使用并且相连接。
节点创建
一个节点组件需要返回一个 div 标签元素，并有一个必须的属性 id。另一个属性 type 用于定义该元素类型。在输入流程图时，每个节点类型都必须唯一。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ---- - ---- ------------
-------- ----- -
------ -
----------
----- ----------- ----------------- ----------- -- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------ ---
---- -
------
-------
----- ----------- ---------------- ------------ ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------- ---
----- ----
------
-------
----- ----------- -------------- ---------- ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ----- ---
--- ----
------
-------
-----------
--
-
------ ------- ----以上示例中我们创建的三个节点元素， type 属性定义了它们的类型，并不必是字符串类型。
节点间连接
使用 ReactDAGLink 组件将两个连接的节点连接起来。一个连接通常由两个交点组成，我们称之为 输入/输出 点。可以为每个节点渲染任意数量的输入/输出点。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ----- ---------- ------------ - ---- ------------
-------- ----- -
------ -
----------
----- ----------- ----------------- ----------- -- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------ ---
---- -
------
---- ----------------
---- ------------------
-------
----- ----------- ---------------- ------------ ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------- ---
----- ----
------
---- --------- ---------
-------
----- ----------- -------------- ---------- ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ----- ---
--- ----
------
---- ----------------
-------
-------------
---------------------------------------------
---------------------------------------------- -------
-----------
--
-------------
-------------------------------------------- ------
---------------------------------------------- ------
-----------
--
-----------
--
-
------ ------- ----在上述示例中，我们连接了三个节点，并彼此连接它们的输入和输出节点，通过 ReactDAGLink 请求输出和输入的点。
总结
我们通过一个简单的实例向您展示了 react-dag 包的使用。我们介绍了如何使用 ReactDAG, Node, Link 等基本组件完成一个流程图的绘制。
当然，这里的内容还比较简单，react-dag 具有非常多的功能、特性以及组件类型的 API，根据实际需要选用所需的即可。
读完本教程后，您现在应该有了一定的了解 react-dag 的基本结构、组件、操作方式等等，接下来可以更多的学习、深入使用与探索了。祝您代码愉快！
示例代码
您可以直接复制粘贴下面代码，在开发环境中运行查看效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ----- ---------- ------------ - ---- ------------
-------- ----- -
------ -
----------
----- ----------- ----------------- ----------- -- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------ ---
---- -
------
---- ----------------
---- ------------------
-------
----- ----------- ---------------- ------------ ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ------- ---
----- ----
------
---- --------- ---------
-------
----- ----------- -------------- ---------- ----- ------- --------
---- -------- ------ -------- ------- -------- ----------- ----- ---
--- ----
------
---- ----------------
-------
-------------
---------------------------------------------
---------------------------------------------- -------
-----------
--
-------------
-------------------------------------------- ------
---------------------------------------------- ------
-----------
--
-----------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f41