React Flow自定义分组节点实现咨询：带样式自定义标题

你提到的通过parentNode参数关联节点实现分组的方法是可行的，完全可以替代用首个子节点当标题的临时方案，具体实现步骤如下：

• 创建带自定义标题的分组节点组件
  自定义一个分组节点组件，将样式化的标题作为节点的一部分，通过绝对定位把标题放在容器上方：

  const CustomGroupNode = ({ data, selected }) => {
    return (
      <div 
        className={`custom-group ${selected ? 'react-flow__node-selected' : ''}`}
        style={{ 
          paddingTop: '30px',
          border: '2px solid #666',
          borderRadius: '8px',
          backgroundColor: '#f5f5f5',
          position: 'relative'
        }}
      >
        {/* 自定义样式标题 */}
        <div 
          style={{
            position: 'absolute',
            top: '-16px',
            left: '12px',
            backgroundColor: '#fff',
            padding: '4px 12px',
            fontSize: '14px',
            fontWeight: '600',
            border: '2px solid #666',
            borderRadius: '4px',
            whiteSpace: 'nowrap'
          }}
        >
          {data.title}
        </div>
      </div>
    );
  };
  

• 关联子节点到分组
  在定义子节点时，给每个需要归入分组的节点添加parentNode属性，值为分组节点的id，React Flow会自动将这些子节点绑定到分组，拖拽分组时子节点会同步移动：

  const nodes = [
    // 自定义分组节点
    {
      id: 'custom-group',
      type: 'customGroup',
      data: { title: '用户管理模块' },
      position: { x: 150, y: 100 },
      style: { width: 350, height: 250 }
    },
    // 子节点1
    {
      id: 'child-node-1',
      data: { label: '用户列表' },
      position: { x: 180, y: 150 },
      parentNode: 'custom-group'
    },
    // 子节点2
    {
      id: 'child-node-2',
      data: { label: '用户详情' },
      position: { x: 280, y: 150 },
      parentNode: 'custom-group'
    }
  ];
  

• 注册并使用自定义节点
  在React Flow组件中注册自定义节点类型，即可正常渲染分组：

  const nodeTypes = {
    customGroup: CustomGroupNode
  };
  
  function App() {
    return (
      <div style={{ width: '100vw', height: '100vh' }}>
        <ReactFlow
          nodes={nodes}
          edges={[]}
          nodeTypes={nodeTypes}
        />
      </div>
    );
  }
  

额外说明：如果需要分组的折叠/展开功能，可以给分组节点添加collapsible: true属性，配合data.collapsed状态控制，React Flow会自动处理子节点的显示/隐藏逻辑。

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