如何使用React Flow结合MongoDB的JSON数据动态生成流程图

React Flow完全支持基于MongoDB存储的JSON数据动态生成流程图的需求。你所了解的静态编写.tsx文件的用法只是React Flow最基础的示例用法，它本身就是完全数据驱动的库，核心渲染逻辑由nodes和edges两个状态变量控制，只要把数据库中的JSON数据转换为符合格式要求的节点、边数组即可直接渲染。

实现步骤 #

• 后端提供接口从MongoDB中查询你需要的流程图JSON数据，返回给前端React应用
• 前端在组件挂载时拉取该JSON数据，根据业务字段映射转换为React Flow要求的节点、边格式
• 将转换后的数组赋值给React Flow组件对应的属性，框架会自动完成流程图渲染，无需提前编写静态的流程图组件

基础实现代码示例 #

import { useCallback, useEffect, useState } from 'react';
import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Node, Edge } from 'reactflow';
import 'reactflow/dist/style.css';

// 适配你MongoDB中存储的JSON字段的类型定义，可根据实际业务调整
type MongoFlowItem = {
  id: string;
  nodeLabel: string;
  positionX: number;
  positionY: number;
  sourceId?: string;
  targetId?: string;
  // 其他自定义业务字段
}

const DynamicFlowPage = () => {
  const [nodes, setNodes] = useState<Node[]>([]);
  const [edges, setEdges] = useState<Edge[]>([]);

  const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
  const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
  const onConnect = useCallback((connection) => setEdges((eds) => addEdge(connection, eds)), []);

  // 拉取数据并转换为React Flow可识别的格式
  useEffect(() => {
    const getFlowData = async () => {
      // 替换为你的后端接口地址，后端负责从MongoDB拉取JSON数据返回
      const response = await fetch('/api/flow-data');
      const rawData: MongoFlowItem[] = await response.json();

      // 生成节点数组
      const computedNodes: Node[] = rawData.map(item => ({
        id: item.id,
        position: { x: item.positionX, y: item.positionY },
        data: { label: item.nodeLabel },
        // 如果需要用自定义节点，提前定义后在这里指定type即可，无需为每个节点单独写组件
        // type: 'yourCustomNodeType'
      }));

      // 生成边数组
      const computedEdges: Edge[] = rawData
        .filter(item => item.sourceId && item.targetId)
        .map(item => ({
          id: `edge-${item.sourceId}-${item.targetId}`,
          source: item.sourceId,
          target: item.targetId
        }));

      setNodes(computedNodes);
      setEdges(computedEdges);
    };

    getFlowData();
  }, []);

  return (
    <div style={{ width: '100%', height: '800px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
};

export default DynamicFlowPage;

额外提示 #

• 如果需要自定义节点样式，仅需提前定义1次通用自定义节点组件，在生成节点数组时指定type属性对应自定义节点名称即可，所有动态生成的节点都可以复用该组件
• 数据库的JSON条目中仅需要存储节点唯一ID、展示内容、坐标位置、上下游节点关联关系等业务核心字段即可，不需要存储React Flow的私有配置

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