react-zoom-pan-pinch中zoomToElement异常：所有按钮仅放大至element1

问题根源 #

你的代码里所有按钮调用的是同一个handleZoom函数，但没有正确传递对应圆形的ID，导致每次都指向element1。

修正步骤 #

1. 修改按钮的点击事件，把对应圆形的ID作为参数传递给handleZoom：

   <button onClick={() => handleZoom("element1")}>Zoom to element 1</button>
   <button onClick={() => handleZoom("element2")}>Zoom to element 2</button>
   <button onClick={() => handleZoom("element3")}>Zoom to element 3</button>
   <button onClick={() => handleZoom("element4")}>Zoom to element 4</button>
   

2. 调整handleZoom函数，接收传入的ID并调用zoomToElement：

   const handleZoom = (elementId) => {
     zoomPanPinchRef.current.zoomToElement(elementId, 2, 200);
   };
   

3. 确保每个SVG圆形的id属性和传递的参数完全一致：

   <circle id="element1" cx="50" cy="50" r="40" fill="red" />
   <circle id="element2" cx="200" cy="50" r="40" fill="blue" />
   <circle id="element3" cx="50" cy="200" r="40" fill="green" />
   <circle id="element4" cx="200" cy="200" r="40" fill="yellow" />
   

完成以上修改后，每个按钮点击时就会正确触发对应圆形的放大操作。

内容的提问来源于stack exchange，提问作者Jakub Koudela