关于React Flow

“React Flow是什么？”

React Flow是一个基于React的库，可以创建一个可用于绘制流程图并在Web应用程序中允许用户操作节点和边缘（节点之间的连接）的可视化编辑器。

使用 React Flow 构建的服务。

React Flow是被广泛应用于各种应用程序中的。主要在在线白板工具等方面被广泛使用，下面链接中的服务都是通过使用React Flow进行开发的。

本文所要谈论的事情。

我将使用 React Flow 教程的 Code Sandbox 示例来展示实际的 React Flow，并对节点和边的基本信息进行解释。

环境

我将在 React Flow 教程的 Code Sandbox 上进行测试。

文件结构

通常只需编写src文件夹下的文件。

App.tsx是一个读取React Flow文件的文件。基本上不需要修改，可以忽略。

CustomNode.tsx 是用于创建自定义节点的文件。

Flow.tsx主要是用来编写React Flow的代码。

index.tsx 是渲染 React 应用程序的文件。由于基本上不需要修改，所以可以忽略不管。

style.css是用于为节点、边缘等添加样式的文件。

在开始之前要注意的事项是什么？

import ReactFlow from 'react-flow-renderer'; 

import ReactFlow from 'reactflow'; 

import 'reactflow/dist/style.css';

您可以从下面的链接查看这些细节。

節點

const initialNodes: Node[] = [
  {
    id: "1",
    type: "input",
    data: { label: "Node 1" },
    position: { x: 250, y: 5 }
  },
  { id: "2", data: { label: "Node 2" }, position: { x: 100, y: 100 } },
  { id: "3", data: { label: "Node 3" }, position: { x: 400, y: 100 } },
  {
    id: "4",
    type: "custom",
    data: { label: "Custom Node" },
    position: { x: 400, y: 200 }
  }
];

在这里我们定义了在屏幕上显示的节点。

节点ID：可以通过类型选择节点的ID

  input: InputNode
  default: DefaultNode
  output: OutputNode
  group: GroupNode
  custom: Custom　← 自分で定義したノードタイプを使うことができます。

数据：您可以在这里自由地输入数据。在示例代码中，我们准备了标签，并将字符串显示在节点上。
位置：定义了节点的放置位置。

除此之外，还有一些可以决定操作是否可行和是否可以删除的参数。

锋利边缘

const initialEdges: Edge[] = [
  { id: "e1-2", source: "1", target: "2", animated: true },
  { id: "e1-3", source: "1", target: "3" }
];

在这里定义了要在屏幕上显示的边缘。
id：边缘的ID。
source：包含边缘连接源节点的ID。
target：包含边缘连接目标节点的ID。
animated：可以选择边缘是否有动画。

使用React Flow渲染