react-flow自定义节点

前言

在开发react-flow的过程中，自定义节点其实是一个很常用的功能，此文带大家一步一步定义自定义组件。

自定义节点使用

新建组件

{firstOrLast === 0 ? "" : <Handle type="target" position={Position.Top} />}
<NodeWrapper
	onDoubleClick={onNodeDbClicked}
	style={{
		width: width ?? 200 + "px",
		height: height ?? 32 + "px"
	}}>
	{getNodeIcon(type, resStatus, pduStatus, pduSid)}
	<NodeInfoWrapper>{`${title ?? "名称获取失败"}  `}</NodeInfoWrapper>
</NodeWrapper>
{firstOrLast === 2 ? "" : <Handle type="source" position={Position.Bottom} />}

引入组件

import CuFlowNode from "@/components/Home/resTopo/topo/node";

定义节点

const nodeTypes = useMemo(() => ({ textUpdater: CuFlowNode }), []);

<ReactFlow
	nodeTypes={nodeTypes}
	nodes={nodes}
	edges={edges}
	onNodesChange={onNodesChange}
	onEdgesChange={onEdgesChange}
	onConnect={onConnect}
	onEdgeUpdate={onEdgeUpdate}
	onInit={setReactFlowInstance}></ReactFlow>

添加节点数据

nodeClone.push({
	id: computer.sid,
	type: "textUpdater",
	data: {
		sid: computer.sid,
		title: computer.alias,
		firstOrLast: 1
	},
	position: { x: 0, y: 0 }
});

 显示效果