设置并获取react-flow的zoom

`react-flow` 组件提供了 `zoom` 和 `onZoomChange` 属性，用于控制和获取组件的缩放级别。 要设置和获取 `react-flow` 组件的缩放级别，请按照以下步骤操作： 1. 设置初始缩放级别：在您的 `react-flow` 组件中，可以使用 `zoom` 属性来设置初始缩放级别。例如，将 `zoom` 属性设置为 `1.5` 将使组件以 150% 的大小呈现。 ```jsx import React from 'react'; import ReactFlow from 'react-flow-renderer'; const MyFlow = () => { return ; }; export default MyFlow; ``` 2. 监听缩放级别更改事件：在您的 `react-flow` 组件中，可以使用 `onZoomChange` 属性来监听缩放级别更改事件，并在缩放级别更改时执行自定义逻辑。例如，您可以将当前缩放级别存储在状态中，以便稍后使用。 ```jsx import React, { useState } from 'react'; import ReactFlow from 'react-flow-renderer'; const MyFlow = () => { const [zoomLevel, setZoomLevel] = useState(1); const handleZoomChange = (newZoomLevel) => { setZoomLevel(newZoomLevel); }; return ; }; export default MyFlow; ``` 在这个例子中，我们创建了一个名为 `MyFlow` 的组件，并使用 `zoom` 属性设置了初始缩放级别。我们还使用 `onZoomChange` 属性监听缩放级别更改事件，并将当前缩放级别存储在状态中。