内置组件

¥Built-In Components

React Flow 带有几个附加组件。在本指南中，我们将向你展示如何使用它们。我们在这里使用上一个示例代码。

¥React Flow comes with several additional components. In this guide we show you how to use them. We are using our previous example code here.

MiniMap

如果你的流程变得更大，你可能需要快速获得概述。为此，我们构建了 MiniMap 组件。你可以通过将其添加为子节点轻松地将其添加到你的流程中：

¥If your flow gets bigger, you might want to get an overview quickly. For this we have built the MiniMap component. You can easily add it to your flow by adding it as a children:


import { ReactFlow, MiniMap } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
 
const nodeColor = (node) => {
  switch (node.type) {
    case 'input':
      return '#6ede87';
    case 'output':
      return '#6865A5';
    default:
      return '#ff0072';
  }
};
 
function Flow() {
  return (
    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
      <MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} zoomable pannable />
    </ReactFlow>
  );
}
 
export default Flow;

控件

¥Controls

React Flow 带有可自定义的控制栏，你可以通过导入 Controls 组件来使用它

¥React Flow comes with a customizable controls bar, that you can use by importing the Controls component


import { ReactFlow, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
 
function Flow() {
  return (
    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
      <Controls />
    </ReactFlow>
  );
}
 
export default Flow;

背景

¥Background

如果你想要显示图案背景，可以使用 Background 组件

¥If you want to display the pattern background, you can use the Background component


import { useState } from 'react';
import { ReactFlow, Background, Panel } from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
 
function Flow() {
  const [variant, setVariant] = useState('cross');
 
  return (
    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
      <Background color="#ccc" variant={variant} />
      <Panel>
        <div>variant:</div>
        <button onClick={() => setVariant('dots')}>dots</button>
        <button onClick={() => setVariant('lines')}>lines</button>
        <button onClick={() => setVariant('cross')}>cross</button>
      </Panel>
    </ReactFlow>
  );
}
 
export default Flow;

面板

¥Panel

一个辅助组件，用于在 React Flow 视口顶部显示内容。Panel 组件

¥A helper component to display content on top of the React Flow viewport. Panel component


import { ReactFlow, Background, Panel } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const nodes = [
  {
    id: '1',
    data: { label: 'this is an example flow for the <Panel /> component' },
    position: { x: 0, y: 0 },
  },
];
 
function Flow() {
  return (
    <ReactFlow nodes={nodes} fitView>
      <Panel position="top-left">top-left</Panel>
      <Panel position="top-center">top-center</Panel>
      <Panel position="top-right">top-right</Panel>
      <Panel position="bottom-left">bottom-left</Panel>
      <Panel position="bottom-center">bottom-center</Panel>
      <Panel position="bottom-right">bottom-right</Panel>
      <Background variant="cross" />
    </ReactFlow>
  );
}
 
export default Flow;