React Flow构建基于节点的交互式 UI、编辑器、流程图和图表

联合创作 · 2023-09-19 19:48

React Flow 是一个用于构建基于节点图形的库。可以很容易地实现自定义的节点类型,而且它还带有迷你地图和图形控件等组件。

React Flow 最初是为数据块创建的。一个基于节点的编辑器,用于转换、分析和可视化数据。

安装

npm install react-flow-renderer

快速开始

这是如何使用 React Flow 的一个基本例子。您可以在网站上找到更多高级示例:

import React from 'react';
import ReactFlow from 'react-flow-renderer';

const elements = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  // you can also pass a React component as a label
  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
];

const BasicFlow = () => <ReactFlow elements={elements} />;

开发

在开始之前,需要通过npm install安装 React Flow 依赖项和一个示例:cd example && npm install;

如果您想贡献或开发自定义功能,最简单的方法是启动开发服务器:

npm start
浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报