React Flow構(gòu)建基于節(jié)點(diǎn)的交互式 UI、編輯器、流程圖和圖表

React Flow 是一個(gè)用于構(gòu)建基于節(jié)點(diǎn)圖形的庫(kù)?？梢院苋菀椎貙?shí)現(xiàn)自定義的節(jié)點(diǎn)類型，而且它還帶有迷你地圖和圖形控件等組件。

React Flow 最初是為數(shù)據(jù)塊創(chuàng)建的。一個(gè)基于節(jié)點(diǎn)的編輯器，用于轉(zhuǎn)換、分析和可視化數(shù)據(jù)。

安裝

npm install react-flow-renderer

快速開(kāi)始

這是如何使用 React Flow 的一個(gè)基本例子。您可以在網(wǎng)站上找到更多高級(jí)示例：

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} />;

開(kāi)發(fā)

在開(kāi)始之前，需要通過(guò)npm install安裝 React Flow 依賴項(xiàng)和一個(gè)示例：cd example && npm install；

如果您想貢獻(xiàn)或開(kāi)發(fā)自定義功能，最簡(jiǎn)單的方法是啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm start