要在React Flow中连接两个节点，您需要创建一个新的元素对象，并将其添加到元素数组中。该元素对象应该具有`type`属性设置为`edge`，并且应该具有`source`和`target`属性，这些属性分别指定边缘的源节点和目标节点。
例如，以下是一个简单的例子，它创建两个节点和一个连接它们的边缘：
```jsx
import React, { useState } from 'react';
import ReactFlow, { addEdge, MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 0, y: 0 } },
{ id: '2', type: 'output', data: { label: 'Node 2' }, position: { x: 200, y: 0 } },
];
const SimpleFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => {
setElements((els) => addEdge(params, els));
};
return (
);
};
export default SimpleFlow;
```
在这个例子中，我们首先定义了两个节点，一个输入节点和一个输出节点。然后，我们使用`useState`钩子来定义一个状态变量`elements`，它包含当前的元素数组。我们还定义了一个`onConnect`函数，它将新的边缘添加到元素数组中。
在`ReactFlow`组件中，我们将`elements`和`onConnect`属性传递给它。这将显示节点和边缘，并允许用户连接它们。我们还添加了一个小地图和控件，以便用户可以缩放和平移图形。
要连接两个节点，请单击源节点上的输出端口并拖动鼠标到目标节点上的输入端口。这
AI助手
资讯
常用工具
网站模板