# 高级 React 流程模式 ## 子流程（嵌套节点）常量节点 = [ // 父（组）节点 { id: '组1', 类型：'组'，位置：{x：0，y：0}，样式：{宽度：400，高度：300，填充：10}，数据：{标签：'组'}， }, // 子节点 { id: '孩子-1', ParentId: 'group-1', // 引用父级 extent: 'parent', // 约束到父边界 ExpandParent: true, // 如果拖动到边缘则自动展开父级 position: { x: 20, y: 50 }, // 相对于父级数据：{标签：'孩子1'}， }, { id: '孩子-2', 父 ID: 'group-1', 范围：'父级'，位置：{x：200，y：50}，数据：{标签：'孩子2'}， }, ]; ### 组节点组件函数 GroupNode({ data, id }: NodeProps) { 返回（

{data.label}

{/* 子元素由 React Flow 自动渲染 */}

）； } ## 自定义连接线从'@xyflow/react'导入{ConnectionLineComponentProps，getSmoothStepPath}；函数自定义连接线（{ 从X，从Y，从位置，到X、到Y、到位置、连接状态， }: ConnectionLineComponentProps) { const [路径] = getSmoothStepPath({ 来源X：来自X，来源Y：来自Y，源位置：来自位置，目标X：toX，目标Y：到Y，目标位置：到位置， }); 返回（ <路径 d={路径} 填充=“无” 笔划={connectionStatus === '有效' ? '#22c55e': '#ef4444'} 笔划宽度={2} 笔划Dasharray =“5 5” /> ）； } ## 从外部源拖放从 'react' 导入 { useReactFlow, useCallback, useRef }; 函数 DnDFlow() { const ReactFlowWrapper = useRef(null); const { screenToFlowPosition, addNodes } = useReactFlow(); const [reactFlowInstance, setReactFlowInstance] = useState(null); const onDragOver = useCallback((事件：DragEvent) => { event.preventDefault(); event.dataTransfer.dropEffect = '移动'; }, []); const onDrop = useCallback((事件：DragEvent) => { event.preventDefault(); const type = event.dataTransfer.getData('application/reactflow'); 如果（！类型）返回； // 将屏幕位置转换为流动位置常量位置 = screenToFlowPosition({ x: 事件.clientX, y: 事件.clientY, }); 常量新节点 = { id: `${Date.now()}`, 类型，位置，数据: { 标签: `${type} 节点` }, }; 添加节点（新节点）； }, [screenToFlowPosition, addNodes]); 返回（

<反应流 onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance} />

）； } // 侧边栏组件函数侧边栏（）{ const onDragStart = (事件: DragEvent, nodeType: string) => { event.dataTransfer.setData('应用程序/reactflow', nodeType); event.dataTransfer.effectAllowed = '移动'; }; 返回（ <旁白>

onDragStart(e, 'input')}> 输入节点

onDragStart(e, 'default')}> 默认节点

）； } ## 撤消/重做从 'react' 导入 { useCallback, useState }; 函数 useUndoRedo(initialState: T) { const [history, setHistory] = useState([initialState]); const [索引，setIndex] = useState(0); const 状态 = 历史记录[索引]； const setState = useCallback((newState: T | ((prev: T) => T)) => { 设置历史记录（（上一个）=> { const 已解决 = newState 类型 === '函数' ？ (newState as (prev: T) => T)(prev[index]) ：新状态； // 删除未来状态并添加新状态 const newHistory = prev.slice(0, 索引 + 1); 返回[...新历史记录，已解决]； }); setIndex((i) => i + 1); }, [索引]); const undo = useCallback(() => { setIndex((i) => Math.max(0, i - 1)); }, []); const redo = useCallback(() => { setIndex((i) => Math.min(history.length - 1, i + 1)); }, [历史长度]); const canUndo = 索引 > 0; const canRedo =索引 { const hasPositionChange =changes.some(c => c.type === 'position' && !c.dragging); 如果（有位置变化）{ setState(上一个 => ({ 节点：applyNodeChanges（更改，上一个节点），边缘：上一个边缘， })); } }, [设置状态]); } ## 使用 dagre 进行编程布局从 'dagre' 导入 dagre；界面布局选项{ 方向： 'TB' | 'BT' | 'LR'| 'RL'; 节点宽度：数字；节点高度：数字； } 函数 getLayoutedElements( 节点：节点[]，边缘：边缘[]，选项：LayoutOptions = { 方向：'TB'，nodeWidth：172，nodeHeight：36 } ）{ const g = new dagre.graphlib.Graph(); g.setGraph({rankdir: options.direction }); g.setDefaultEdgeLabel(() => ({})); 节点.forEach((节点) => { g.setNode(节点.id, { 宽度：节点.测量？.宽度？？选项.nodeWidth, 高度：节点.测量？.高度？？选项.nodeHeight, }); }); 边缘.forEach((边缘) => { g.setEdge(edge.source,edge.target); }); dagre.layout(g); constlayoutedNodes=nodes.map((node)=>{ const nodeWithPosition = g.node(node.id); 返回{ ...节点，位置：{ x: nodeWithPosition.x - (node.measured?.width ?? options.nodeWidth) / 2, y: nodeWithPosition.y - (node.measured?.height ?? options.nodeHeight) / 2, }, }; }); 返回 { 节点：layoutedNodes，边缘 }； } // 测量节点后的使用情况函数流（）{ const { fitView } = useReactFlow(); const onLayout = useCallback((方向: 'TB' | 'LR') => { const { 节点：layoutedNodes，边缘：layoutedEdges } = getLayoutedElements( 节点，边缘， { 方向，节点宽度：150，节点高度：50 } ）； setNodes([...layoutedNodes]); setEdges([...layoutedEdges]); window.requestAnimationFrame(() => { fitView({ 持续时间: 500 }); }); }, [节点, 边, setNodes, setEdges, fitView]); } ## 与 Drop 时的 Edge 连接函数流（）{ const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const { screenToFlowPosition } = useReactFlow(); 常量 onConnectEnd = useCallback( （事件：MouseEvent | TouchEvent，连接状态：FinalConnectionState）=> { // 仅当拖放到窗格上（而不是节点上）时才继续 if (!connectionState.isValid && connectionState.fromHandle) { const id = `${Date.now()}`; const { clientX, clientY } = 事件中的 'changedTouches' ？事件.changedTouches[0] ：事件；常量新节点 = { 身份证号，位置： screenToFlowPosition({ x: clientX, y: clientY }), data: { label: '新节点' }, }; setNodes((nds) => [...nds, newNode]); setEdges((eds) => [ ...编辑， { id: `e-${connectionState.fromNode?.id}-${id}`, 来源：connectionState.fromNode?.id ?? '', 目标：ID， }, ]); } }, [screenToFlowPosition、setNodes、setEdges] ）；返回（ <反应流节点={节点} 边缘={边缘} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnectEnd={onConnectEnd} /> ）； } ## 从边缘访问节点数据从 '@xyflow/react' 导入 { useNodesData, type EdgeProps }; 函数 DataEdge({ 源、目标、...props }: EdgeProps) { // 获取源节点和目标节点的数据 const NodesData = useNodesData([源, 目标]); const sourceData = 节点数据[0]; const targetData = 节点数据[1]； const [路径，labelX，labelY] = getSmoothStepPath(props); 返回（ <> <边缘标签渲染器>

{sourceData?.data?.label} → {targetData?.data?.label}

）； } ## 节点变更的中间件 // 在应用更改之前过滤或修改更改 const onNodesChangeMiddleware = useCallback((更改: NodeChange[]) => { // 示例：防止删除某些节点 constfilteredChanges=changes.filter((change)=>{ if (change.type === '删除') { const 节点=nodes.find((n)=>n.id===change.id); 返回节点？.data？.deletable !== false; } 返回真； }); setNodes((nds) => applyNodeChanges(filteredChanges, nds)); }, [节点, setNodes]); ## 键盘快捷键从'@xyflow/react'导入{useKeyPress}；函数流（）{ const { deleteElements, getNodes, getEdges, fitView } = useReactFlow(); // Ctrl/Cmd + A：全选 const selectAllPressed = useKeyPress(['Meta+a', 'Control+a']); 使用效果（（）=> { 如果（选择全部按下）{ setNodes((nds) => nds.map((n) => ({ ...n, 选定: true }))); setEdges((eds) => eds.map((e) => ({ ...e, 选定: true }))); } }, [selectAllPressed]); // 自定义删除处理程序 const deletePressed = useKeyPress(['Backspace', '删除']); 使用效果（（）=> { 如果（删除按下）{ const selectedNodes = getNodes().filter((n) => n.selected); const selectedEdges = getEdges().filter((e) => e.selected); deleteElements({ 节点: selectedNodes, 边缘: selectedEdges }); } }, [删除按下]); } ## 性能：记忆选择器从'react'导入{useCallback}；从 '@xyflow/react' 导入 { useStore, type ReactFlowState }; 从“zustand/shallow”导入{shallow}； // 在组件外部创建稳定的选择器 const NodesSelector = (state: ReactFlowState) => state.nodes; // 或者使用多个值进行浅比较 const flowStateSelector = (状态: ReactFlowState) => ({ 节点：状态.节点，边缘：状态.边缘，视口：状态.transform， }); 函数 FlowInfo() { const { 节点、边、视口 } = useStore(flowStateSelector,shallow); return

节点：{nodes.length}，边：{edges.length}

； }

反应流高级

包含技能