React Flow自定义连接器技术咨询：如何实现节点顶部间的连接

Absolutely! You can achieve top-to-top node connections in React Flow by leveraging custom source and target handles—this is a fully supported pattern that lets you define exactly where connections start and end on your nodes.

Here's a straightforward, practical implementation to get you set up:

Step 1: Build a Custom Node with Top Handles #

First, create a custom node component that includes both input (target) and output (source) handles positioned at the top. Use React Flow's <Handle> component and set its position prop to Position.Top.

import React from 'react';
import { Handle, Position } from 'reactflow';

const TopConnectedNode = ({ data }) => {
  return (
    <div style={{ 
      padding: '1.2rem', 
      border: '1px solid #ccc', 
      borderRadius: '6px', 
      backgroundColor: '#fff',
      minWidth: '120px',
      textAlign: 'center'
    }}>
      {/* Target handle (input) at the top */}
      <Handle
        type="target"
        position={Position.Top}
        style={{ backgroundColor: '#2563eb', width: '12px', height: '12px' }}
      />
      <div style={{ margin: '0.5rem 0' }}>{data.label}</div>
      {/* Source handle (output) at the top */}
      <Handle
        type="source"
        position={Position.Top}
        style={{ 
          backgroundColor: '#2563eb', 
          width: '12px', 
          height: '12px',
          top: '-6px' // Offset to sit flush with the node's top edge
        }}
      />
    </div>
  );
};

Step 2: Integrate the Custom Node into Your Flow #

Next, set up your main React Flow component, register the custom node, and define your nodes/edges data. You can either predefine the top-to-top edge or let users drag to create connections manually.

import React from 'react';
import ReactFlow, { addEdge, Background, Controls } from 'reactflow';
import 'reactflow/dist/style.css';

// Import our custom node
import TopConnectedNode from './TopConnectedNode';

const nodeTypes = {
  topConnected: TopConnectedNode,
};

const initialNodes = [
  {
    id: '1',
    type: 'topConnected',
    data: { label: 'Node 1' },
    position: { x: 150, y: 80 },
  },
  {
    id: '2',
    type: 'topConnected',
    data: { label: 'Node 2' },
    position: { x: 400, y: 80 },
  },
];

const initialEdges = [
  // Predefined edge connecting Node 1's top source to Node 2's top target
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    style: { stroke: '#2563eb', strokeWidth: 2 },
  },
];

export default function TopConnectionFlow() {
  const [nodes, setNodes] = React.useState(initialNodes);
  const [edges, setEdges] = React.useState(initialEdges);

  const onEdgesChange = (changes) => setEdges((eds) => addEdge(changes, eds));

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        onEdgesChange={onEdgesChange}
        fitView
      >
        <Background gap={16} />
        <Controls />
      </ReactFlow>
    </div>
  );
}

Quick Customization Tips #

• Handle Styling: Tweak the style prop on <Handle> to match your design (adjust size, color, or position offset as needed).
• Enforce Specific Connections: Add an id prop to your handles (e.g., id="top-source"), then reference those IDs in your edge data to ensure connections only use the top handles.
• Edge Appearance: Customize the edge's look with the style prop on edge objects, or use a custom edge component if you need curved paths or other unique visuals.

This setup will let you connect the top edges of Node 1 and Node 2 exactly as you need!

内容的提问来源于stack exchange，提问作者Ritesh Kaushik