React Flow自定义节点的data与isConnectable props来源咨询

1. data 属性 #

这个属性是React Flow内部自动传递给自定义节点的，它对应你在定义节点数组时给每个节点设置的data字段。比如你在App组件里定义节点时会写：

const nodes = [
  {
    id: '1',
    type: 'textUpdater', // 对应自定义节点类型
    position: { x: 0, y: 0 },
    data: { label: '初始文本' } // 这里的内容会直接传给自定义节点的data props
  }
];

React Flow会把每个节点配置里的data对象自动注入到自定义节点组件中，不需要手动传递。

2. isConnectable 属性 #

这个属性也是React Flow内部注入的，取值来自两个层级的配置：

• 全局配置：你在<ReactFlow>组件上设置的isConnectable属性（默认值为true）
• 节点级配置：如果某个节点单独设置了isConnectable字段，会覆盖全局配置

示例代码：

// 全局配置
<ReactFlow
  nodes={nodes}
  edges={edges}
  isConnectable={false} // 全局禁用节点连接
/>

// 单独节点配置
const nodes = [
  {
    id: '1',
    type: 'textUpdater',
    position: { x: 0, y: 0 },
    data: { label: '可连接节点' },
    isConnectable: true // 覆盖全局配置，该节点允许建立连接
  }
];

React Flow会根据这两个配置层级，自动把最终的isConnectable值传递给自定义节点，用于控制节点上的Handle是否允许创建连接。

内容的提问来源于stack exchange，提问作者Paul Asafov