Skip to Content
学习教程快速入门

快速入门

¥Quickstart

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

¥If you want to get up-and-running as soon as possible you’re in the right place! This page will take you from zero to a working React Flow app in a few minutes. From there, you can take a deeper look at what React Flow is all about, check out the examples, or dive into the API docs.

60 秒内实现 React Flow

¥React Flow in 60 seconds

https://www.youtube.com/watch?v=aUBWE41a900 

在线运行

¥Play online

你可以通过查看我们在 CodeSandbox  上的入门项目来尝试 React Flow，而无需在本地进行任何设置：

¥You can try React Flow without setting anything up locally by checking out the starter projects we have on CodeSandbox :

JS
new.reactflow.dev/js
TS
new.reactflow.dev/ts

Vite 模板

¥Vite template

如果你想立即开始，可以使用我们的 vite 模板 ：

¥If you want to get started right away, you can use our vite template :

npx degit xyflow/vite-react-flow-template app-name

安装

¥Installation

要在本地开始，你应该具备以下几点：

¥To get started locally you should have a few things:

  • Node.js  已安装。

    ¥Node.js  installed.

  • npm 或其他包管理器，如 yarn  或 pnpm 。

    ¥Either npm or another package manager like yarn  or pnpm .

  • React  的工作知识。你不需要成为专家，但你应该熟悉基础知识。

    ¥A working knowledge of React . You don’t need to be an expert, but you should be comfortable with the basics.

首先，按照你的喜好启动一个新的 React  项目；我们建议使用 Vite ，但选择权在你手中。

¥First, spin up a new React  project however you like; we recommend using Vite  but the choice is yours.

npm init vite my-react-flow-app -- --template react

React Flow 在 npm 上发布为 @xyflow/react，因此请继续添加它。

¥React Flow is published on npm as @xyflow/react, so go ahead and add it next.

npm install @xyflow/react

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

¥Lastly, spin up the dev server and we’re good to go!

创建你的第一个流程

¥Creating your first flow

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

¥The reactflow package exports the <ReactFlow /> component as the default export. That and a handful of nodes and edges are all we need to get something going! Get rid of everything inside App.jsx and add the following:

import React from 'react';
import { ReactFlow } from '@xyflow/react';
 
import '@xyflow/react/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>
  );
}

这里有几件事要注意：

¥There are a few things to pay attention to here:

  • 你必须导入 React Flow 样式表。

¥ You must import the React Flow stylesheet.

  • <ReactFlow /> 组件必须封装在具有宽度和高度的元素中。

¥ The <ReactFlow /> component must be wrapped in an element with a width and height.

添加交互性

¥Adding interactivity

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

¥Graphs created with React Flow are fully interactive. We can move nodes around, connect them together, delete them, … To get the basic functionality we need to add three things:

幸运的是，我们提供了一些钩子来简化此操作！

¥Fortunately for you, we provide some hooks to make this easy!

import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/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>
  );
}

一些额外的好东西

¥Some extra goodies

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

¥Finally, React Flow ships with some plugins out of the box for things like a <Minimap /> or viewport <Controls />.

import React, { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/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>
  );
}

瞧。你已经创建了第一个交互式流程！查看下面的链接以了解下一步要去哪里。

¥ Et voila. You’ve already created your first interactive flow! Check out the links below on where to head next.

后续步骤

¥Next Steps

概念自定义示例API 参考Discord模板项目
Last updated on
简介