React Flow 基础使用

演示自定义节点、连线、连线删除、缩放控件和小地图。

交互演示 React

亲手试一试，更容易理解。

在当前页面运行 React Flow 基础使用的交互示例。

交互指南

点击本页的“运行演示”，或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示：

tsx

import Example from "./third-party-lib/react-flow/base-use/FlowBase";

export default function ExamplePage() {
  return <Example />;
}

名称	类型或形式	说明
`nodes / edges`	数组	图的受控节点和连线数据
`onNodesChange / onEdgesChange`	function	处理图编辑
`onConnect`	function	连接两个端点
`nodeTypes / edgeTypes`	映射	注册自定义节点和连线

图数据仅存在页面状态中。React Flow 父容器必须有明确宽高。业务使用时应把类型映射放在组件外以保持引用稳定。