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 }
});
显示效果
文章目录
关闭
共有 0 条评论