跳到主要内容

快速入门

提示

原文：https://reactflow.dev/learn 【2024-5-3】

个人翻译，仅供参考。

如果您想尽快上手并运行起来，那么您来对地方了！此页面将在几分钟内带您从零开始使用 React Flow 应用程序。从那里，您可以更深入地了解 React Flow 的全部内容，查看示例，或深入研究 API 文档。

React Flow 60秒​

参看视频

https://youtu.be/aUBWE41a900

在线试玩​

new.reactflow.dev/js

new.reactflow.dev/ts

Vite 模板​

如果你想马上开始，可以用我们的vite template

安装​

要在本地开始，您应该具备以下条件：

  • 安装好Node.js
  • npm 或其他包管理器，如yarn或pnpm。
  • React 的实用知识。您不需要成为专家，但您应该熟悉基础知识。

首先，根据您的喜好启动一个新的 React 项目；我们建议使用 Vite ，当然选择权在您。

npm create vite@latest my-react-flow-app -- --template react

React Flow 在 npm 上发布为reactflow，因此请继续下一步添加。

npm install reactflow

最后，启动开发服务器，我们就可以开始了！

npm run dev

创建您的第一个流程​

ReactFlow 包导出 <ReactFlow /> 组件作为默认导出。我们需要的就是这些以及一些节点和边！删除 App.jsx 中的所有内容并添加以下内容：

import React from 'react';
import ReactFlow from 'reactflow';
 
import 'reactflow/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}
提示

这里有几点需要注意：

  • 🎨 你必须导入 React Flow stylesheet.
  • 📐 <ReactFlow /> 组件必须包装在具有宽度和高度的元素中。

添加交互​

使用 React Flow 创建的图形是完全可交互式的。我们可以移动节点、将它们连接在一起、删除它们……为了获得基本功能，我们需要添加三件事：

  • 节点更改(nodes change)时执行操作的回调。
  • 当边缘发生变化(edges change)时要执行的操作的回调。
  • 连接节点(nodes connected)时执行操作的回调。

幸运的是，我们提供了一些钩子来让这一切变得简单！

import React, { useCallback } from 'react';
import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'reactflow';
 
import 'reactflow/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
}

一些额外的好东西​

最后，React Flow 附带了一些开箱即用的插件，例如 <Minimap /> 或视口 <Controls />。

import React, { useCallback } from 'react';
import ReactFlow, {
    MiniMap,
    Controls,
    Background,
    useNodesState,
    useEdgesState,
    addEdge,
} from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
    { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
    { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

    const onConnect = useCallback(
        (params) => setEdges((eds) => addEdge(params, eds)),
        [setEdges],
    );

    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <ReactFlow
                nodes={nodes}
                edges={edges}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                onConnect={onConnect}
            >
                <Controls />
                <MiniMap />
                <Background variant="dots" gap={12} size={1} />
            </ReactFlow>
        </div>
    );
}

参考例子预览：https://reactflow.dev/learn#some-extra-goodies