React Flow 快速入门

219 阅读1分钟

[React Flow官网](Api Reference – React Flow)真的写的挺好,因为官网开始便说明了「快速入手」和「API参考」的不同作用,前者解决的是如何使用的问题,后者回答的是“这是什么东西”的问题。甚者贴心地简单介绍了TypeScript的常用语法,满足对TS语法不是很熟悉的同学。

ReactFlow 渲染

第一次使用ReactFlow组件时,有两个注意点。

  1. 必须引入样式
  2. 父容器必须设置宽高

image.png

增加互动

为了使节点可添加、拖拽、连线、删除,需要使用库提供的useNodesState, useEdgesState, addEdge钩子。

image.png

辅助功能

该库还附带了一些开箱即用的组件,如小地图、支持缩放功能的小面板等等。

image.png

demo代码:playcode.io/1875469