如何在ReactFlow的每个节点旁添加信息按钮？

完全可以实现，核心思路是自定义节点组件，把信息按钮集成到节点内部，通过定位让按钮显示在节点旁。以下是具体实现步骤和代码示例：

1. 创建自定义节点组件 #

定义包含信息按钮的自定义节点，通过绝对定位将按钮放置在节点的指定位置（比如右上角），同时可以添加交互逻辑：

const CustomNode = ({ data, isHovered }) => {
  const handleInfoClick = () => {
    // 这里编写信息按钮的点击逻辑，比如展示节点详情、弹窗等
    console.log("节点详情：", data);
  };

  return (
    <div style={{ 
      position: "relative", 
      padding: "12px", 
      border: "1px solid #ccc", 
      borderRadius: "6px", 
      backgroundColor: "#fff" 
    }}>
      {/* 节点原有内容 */}
      <div>{data.label}</div>
      {/* 信息按钮 */}
      <button
        onClick={handleInfoClick}
        style={{
          position: "absolute",
          top: "-12px",
          right: "-12px",
          width: "26px",
          height: "26px",
          borderRadius: "50%",
          backgroundColor: "#ffd700",
          border: "none",
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "14px",
          fontWeight: "bold",
          // 可选：仅在鼠标悬停节点时显示按钮
          opacity: isHovered ? 1 : 0,
          transition: "opacity 0.2s ease"
        }}
      >
        i
      </button>
    </div>
  );
};

2. 在ReactFlow中注册自定义节点 #

修改你的ReactFlow组件，通过nodeTypes属性注册自定义节点类型：

<div> 
    {display && (
        <ReactFlow 
          style={{ position: "absolute", zIndex: 1 }} 
          nodes={nodes} 
          edges={edges} 
          fitView 
          onNodeMouseEnter={handleOpen} 
          onNodeMouseLeave={handleClose} 
          onEdgeMouseEnter={handleEdgeOpen} 
          onEdgeMouseLeave={handleEdgeClose}
          // 注册自定义节点
          nodeTypes={{ custom: CustomNode }}
        />
    )}
</div> 

3. 更新nodes数组配置 #

确保你的nodes数组中，每个需要显示信息按钮的节点都指定type为自定义节点的名称（这里是custom）：

const nodes = [
  {
    id: "node-1",
    type: "custom", // 使用自定义节点
    data: { label: "示例节点1" },
    position: { x: 150, y: 100 }
  },
  {
    id: "node-2",
    type: "custom",
    data: { label: "示例节点2" },
    position: { x: 400, y: 100 }
  }
];

可选优化 #

• 如果需要和你现有的handleOpen/handleClose逻辑联动，可以通过节点的isHovered属性（ReactFlow内置）控制按钮显示，或者在handleOpen中记录当前悬停的节点ID，在自定义节点中判断是否显示按钮。
• 可以根据需求调整按钮的样式、位置，比如放在节点左下角、左侧等。

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