react-flow 节点选中功能实现

前言

在拓扑图开发过程中，有个功能是：选中节点，然后更改节点样式功能。实现思路：节点点击事件中，更改自定义的data selected的值，选中的设置为true，否则为false。自定义节点中，添加样式判断：true则渲染样式否则不渲染。

下面是我的实现过程。

实现效果

根组件中添加代码

根组件为： ReactFlow 所在的组件。

具体实现方法

思路： 遍历所有节点，找到当前节点并将节点的selected值设置为true，其余设置为false

const nodeSelected = node => {
	setNodes(nodes =>
		nodes.map(n => {
			if (node === undefined) {
				n.data = { ...n.data, selected: false };
			} else {
				if (n.id === node?.id) {
					n.data = { ...n.data, selected: true };
				} else {
					n.data = { ...n.data, selected: false };
				}

				if (n.id === node.id && node) {
					n.data = { ...n.data, selected: true };
				} else {
					n.data = { ...n.data, selected: false };
				}
			}
			return n;
		})
	);
};

点击事件方法调用

<ReactFlowProvider>
	<ReactFlow
		onContextMenu={handleContextMenu}
		// onMouseDown={handleContextMenu}
		nodeTypes={nodeTypes}
		nodes={nodes}
		edges={edges}
		onNodesChange={onNodesChange}
		onEdgesChange={onEdgesChange}
		onConnect={onConnect}
		onNodeDragStart={onNodeDragStart}
		onNodeDrag={onNodeDrag}
		onNodeDragStop={onNodeDragStop}
		// onNodeClicked={onNodeClicked}
		onNodeContextMenu={handleNodeContextMenu}
		onNodeClick={onNodeClicked} // 节点点击
		onPaneClick={onPaneClick} // 面板点击
		onEdgeUpdate={onEdgeUpdate}
		onInit={setRfInstance}>
		<ControlTools />
	</ReactFlow>

const onPaneClick = (evt, node) => { // 面板点击事件
	nodeSelected(node);
	setMenuVisible(false);
};

const onNodeClicked = (evt, node) => { // 节点点击事件
	nodeSelected(node);
	setMenuVisible(false);
};

子组件

子组件表示：自定义节点的组件。

核心代码：border: selected ? "1px dashed #36ceff" : "1px dashed transparent"

<NodeWrapper
	onDoubleClick={onNodeDbClicked}
	onClick={onNodeClicked}
	style={{
		width: width ?? 200 + "px",
		// height: height ?? 32 + "px",
		padding: "2px",
		border: selected ? "1px dashed #36ceff" : "1px dashed transparent"
	}}>
	{getNodeIcon(type, resStatus, pduStatus, pduSid)}
	<NodeInfoWrapper>{`${title ?? "名称获取失败"}  `} 
        </NodeInfoWrapper>
</NodeWrapper>

总结

我在编写过程中遇到的最大的问题就是：如果不添加以下代码，点击节点就会报错。

if (n.id === node.id && node) { n.data = { ...n.data, selected: true }; } else { n.data = { ...n.data, selected: false }; }