React工作流

原创已于 2022-04-07 16:11:51 修改 · 3.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

于 2022-03-03 16:39:33 首次发布

React 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用React Flow渲染工作流，选择react-flow-renderer处理大量节点数据，通过自定义节点样式扩展功能，并详细讲解了节点和连线的API配置。特别强调了关键ID和字符串格式的重要性。

技术选型

领导提到要写个工作流，我们的技术栈是React，翻阅了文档之后在 jsPlumb.js 和 react-flow-renderer 中选择，因为 react-flow-renderer 相对简单，也能达到预期效果，所以选择react-flow-renderer

效果

在这里插入图片描述

数据格式

因为节点是后端返回的数据列表，可能会达到上千个，所以没有用拖拽的方式，选择用导入的方式。
数据格式为：

[
    {
      data: {id: "BPvugVEM1", label: "名字1", remark: "", edit: ""},
      id: "BPvugVEM1",
      type: "relation",
      position: {x: 0, y: 0},
    },
    {
      data: {id: "BPvugVEM2", label: "名字2", remark: "", edit: ""},
      id: "BPvugVEM2",
      type: "relation",
      position: {x: 0, y: 60},
    },
    {
      data: {id: "BPvugVEM3", label: "名字3", remark: "", edit: ""},
      id: "BPvugVEM3",
      type: "relation",
      position: {x: 0, y: 120},
    }
  ]

当然，这肯定是拿到后端的数据之后做的二次处理。

API

既然使用了新的东西，肯定还是要研究一下，文档又是英文的，所以针对常用的api做了简单整理。

node节点

<ReactFlow elements={rightSource} nodeTypes={nodeTypes} onNodeDoubleClick={HandleNode}>
            <Controls />    
      </ReactFlow>

在这里插入图片描述
(1) node节点的相关属性，主要是在nodes对象里面去设置

			id: nodeId,  // 节点id
                data: {
                    label: nodeName,  // 要传入节点的内容
                },
                position: {
                    x: num%2 == 0 ? 25 + 200 * (n - 1 - remender) : 25 + 200 * remender, y: 75 * num
                },  //节点在视图中的位置
                className: status_list[t.status],  // 节点样式，这个很常用
                sourcePosition: num%2 == 0 ? 'left' : 'right',  // 入口位置
                targetPosition: num%2 == 0 ? 'right' : 'left',  //出口位置
                type: 'customnode' //节点类型

（2）那么如果原始节点不符合产品的要求要做拓展，比如在右上角加上节点id，怎么办？
这里就要用到自定义样式

const CustomNode = ({ id, data, sourcePosition, targetPosition }) => (
      <div className="handle-nodes">
        <Handle type="target" position={targetPosition}/>
        <div style={{position: 'absolute', top: '0', left: '2px', fontSize: '12px'}}>{id}</div>
        <div style={{textAlign: 'center', height: '40px', lineHeight: '38px'}}>{data.label}</div>
        <Handle type="source" position={sourcePosition}/>
      </div>
    );
    const nodeTypes = {
      customnode: CustomNode
    }

这里的data就是nodes中定义的节点内容

edges 连线
除了节点之外最重要的就是连线了

				id: uuidv4(),
                source: t.from,
                target: t.to,
                type: 'smoothstep', //指定连线的类型，常用的 默认为实线，smoothstep为虚线
                arrowHeadType:"arrow", //连线带 箭头
                borderRadius: 10, // 连线的弧度
                label: 'updatable edge'， //连线中的文字提示，类似 ——阿巴—— 
                animated: true, //开启动画，当为虚线是常开启动画
                style: {strokeWidth: 2} //这里可以调节连线的粗细

ReactFlow props API

onNodeDoubleClick双击节点
	onNodeClick单击节点
	onNodeDragStart
	onNodeDrag
	onNodeDragStop
	onNodeMouseEnter
	onNodeMouseMove
	onNodeMouseLeave
	onNodeContextMenu
	onNodesDelete

参考文档 https://juejin.cn/post/7058483266533195807#heading-10
参考文档 https://reactflow.dev/docs/api/node-types/

工作流顶级巨坑

要注意的事情是

{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
  { id: 'e1-2', source: '1', target: '2' },

这个id一定要用字符串，不然会出bug，血泪史啊！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

还要注意一点！
edges 里面的 source: String(t.from), target: String(t.to),
也要用字符串啊不然更新了线就没了啊啊啊啊啊啊

如果你要保存工作流，怎么获取工作流的所有信息呢，包括节点位置哦。

这一行代码就能获取所有信息啦

console.log(reactFlowInstance.toObject()) //工作流所有信息

reactFlowInstance 是谁呢？
是画布实例啦
// 画布加载完毕，保存当前画布实例
const onLoad = (instance) => setReactFlowInstance(instance);
这样就把画布上所有的信息都保存到reactFlowInstance啦，当然setReactFlowInstance是reducer，reactFlowInstance是state