多连接线

React Flow 通常只允许一次创建一个连接。此示例基于自定义连接线示例，展示如何一次从任何选定节点绘制多条连接线。

¥React Flow typically only allows one connection to be created at a time. This example builds on the custom connection line example to show how to draw multiple connection lines from any selected nodes at once.

注意 onConnect 处理程序。如果你忘记包含此内容，则即使你选择了多个节点，也只会创建一个连接！

¥Pay attention to the onConnect handler. If you forget to include this then only one connection will be created even if you have multiple selected nodes!


import { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
 
import ConnectionLine from './ConnectionLine';
 
const initialNodes = [
  {
    id: 'a',
    type: 'input',
    data: { label: 'Click to select' },
    position: { x: 100, y: -100 },
  },
  {
    id: 'b',
    type: 'input',
    data: { label: 'these nodes' },
    position: { x: 300, y: -50 },
  },
  {
    id: 'c',
    type: 'input',
    data: { label: 'then drag... ' },
    position: { x: 150, y: 0 },
  },
  {
    id: 'd',
    type: 'output',
    data: { label: '...and connect to me!' },
    position: { x: 250, y: 200 },
  },
];
 
const ConnectionLineFlow = () => {
  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback(
    ({ source, target }) => {
      return setEdges((eds) =>
        nodes
          .filter((node) => node.id === source || node.selected)
          .reduce(
            (eds, node) => addEdge({ source: node.id, target }, eds),
            eds,
          ),
      );
    },
    [nodes],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      connectionLineComponent={ConnectionLine}
      onConnect={onConnect}
      fitView
      fitViewOptions={{
        padding: 0.2,
      }}
      style={{ backgroundColor: "#F7F9FB" }}
      >
        <Background />
      </ReactFlow>  
  );
};
 
export default ConnectionLineFlow;

⚠️

此示例使用特殊的 internalsSymbol 来访问你通常不需要访问的节点上的属性。隐藏在此符号后面的属性没有与公共 API 相同的稳定性保证，因此请谨慎使用它们。

¥This example makes use of the special internalsSymbol to access properties on a node you won’t typically need access to. Properties hidden behind this symbol don’t have the same stability guarantees as the public API, so use them with caution.