如何修改React Flow拖拽示例中节点的默认显示名称

前置操作：先修改index.tsx第19行附近的初始节点数组的label属性，把初始的"input"、"default"、"output"替换为你需要的"alpha"、"beta"、"gamma"，保证页面初始加载的节点显示正确。

你可以选择以下两种方案实现拖拽新增节点的文本修改，优先推荐第一种改动量更小的实现：

方案一：仅修改drop节点时的映射逻辑（无需调整拖拽逻辑） #

这个方案不需要修改Sidebar.tsx的代码，仅需调整index.tsx中创建新节点的逻辑：

1. 在index.tsx的onDrop函数内，新增一个节点类型到显示文本的映射对象：

const nodeLabelMap = {
  input: 'alpha',
  default: 'beta',
  output: 'gamma'
}

2. 找到创建新节点的代码段，将原来的label字段赋值改为从映射对象中取值即可：

const newNode = {
  id: getId(),
  type: nodeType,
  position: position,
  // 把原来的label赋值替换为下面的写法
  label: nodeLabelMap[nodeType],
  data: { label: nodeLabelMap[nodeType] }
  // 其余原有配置保持不变
}

方案二：拖拽时传递完整节点数据（更灵活，适合后续扩展） #

如果后续需要给拖拽节点加更多自定义属性，可以用这个方案：

1. 调整Sidebar.tsx的配置：
   • 先定义侧边栏所有拖拽项的完整属性：

   const dragItems = [
     { type: 'input', label: 'alpha' },
     { type: 'default', label: 'beta' },
     { type: 'output', label: 'gamma' }
   ]
   

   • 修改onDragStart方法，传递序列化后的完整节点数据：

   const onDragStart = (event, nodeItem) => {
     event.dataTransfer.setData('application/reactflow', JSON.stringify(nodeItem));
     event.dataTransfer.effectAllowed = 'move';
   }
   

   • 调整侧边栏元素的渲染逻辑，遍历上面的dragItems数组渲染，绑定onDragStart时传入对应数组项即可。
2. 调整index.tsx的onDrop逻辑：
   • 先反序列化拿到传递的完整数据：

   const nodeData = JSON.parse(event.dataTransfer.getData('application/reactflow'))
   

   • 创建新节点时直接使用拿到的属性：

   const newNode = {
     id: getId(),
     type: nodeData.type,
     position: position,
     label: nodeData.label,
     data: { label: nodeData.label }
     // 其余原有配置保持不变
   }
   

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