如何在React组件外部调用react-zoom-pan-pinch组件的Props方法

我在项目中使用了npm包react-zoom-pan-pinch，该组件提供了zoomIn、zoomOut、resetTransform等多个以Props形式暴露的方法。目前我需要在组件外部的自定义函数handleShiftClick中调用zoomOut方法（当按住Shift键时触发），但无法直接访问这些组件方法。请问如何实现在自定义函数中调用react-zoom-pan-pinch组件的Props方法？以下是我的代码示例：

const handleShiftClick = () => { 
  if (event.shiftKey) { 
    zoomOut();// component function 
  } 
}; 
return ( 
  <div className="App"> 
    <TransformWrapper initialScale={1}> 
      // functions 
      {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( 
        <> 
          <div className="tools"> 
            <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}> 
              <button onClick={() => zoomIn()}>+ key</button> 
            </Hotkeys> 
          </div> 
          <TransformComponent></TransformComponent> 
        </> 
      )} 
    </TransformWrapper> 
  </div> 
);

这个问题很常见，当你需要在TransformWrapper的render props范围外访问组件提供的方法时，有两种实用的方案可以解决：

方案一：使用useRef存储组件方法 #

这种方法适合需要在全局事件（比如document.click）或者组件其他外部逻辑中调用方法的场景：

1. 首先在组件顶部声明一个useRef来存储zoom相关方法：

import { useRef } from 'react';

// ...

const zoomMethodsRef = useRef(null);

2. 在TransformWrapper的render props回调中，将组件提供的方法赋值给这个ref：

<TransformWrapper initialScale={1}> 
  {({ zoomIn, zoomOut, resetTransform, ...rest }) => { 
    // 将方法存储到ref中，这样外部就能访问到
    zoomMethodsRef.current = { zoomOut, zoomIn, resetTransform };
    
    return ( 
      <> 
        <div className="tools"> 
          <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}> 
            <button onClick={() => zoomIn()}>+ key</button> 
          </Hotkeys> 
        </div> 
        <TransformComponent></TransformComponent> 
      </> 
    )
  }} 
</TransformWrapper>

3. 修改你的handleShiftClick函数，通过ref调用方法（注意要接收event参数，否则event.shiftKey会报错）：

const handleShiftClick = (event) => { 
  // 先检查ref是否有值，避免组件未初始化时调用出错
  if (event.shiftKey && zoomMethodsRef.current) { 
    zoomMethodsRef.current.zoomOut();
  } 
};

方案二：将函数移到render props内部利用闭包 #

如果你的handleShiftClick只需要绑定在TransformWrapper内部的元素上，直接把函数定义移到render props回调里会更简洁，不需要额外的ref：

return ( 
  <div className="App"> 
    <TransformWrapper initialScale={1}> 
      {({ zoomIn, zoomOut, resetTransform, ...rest }) => { 
        // 直接在内部定义函数，就能访问到zoomOut
        const handleShiftClick = (event) => { 
          if (event.shiftKey) { 
            zoomOut();
          } 
        };

        return (
          <> 
            <div className="tools"> 
              <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}> 
                <button onClick={() => zoomIn()}>+ key</button> 
              </Hotkeys> 
              {/* 示例：绑定到某个元素的点击事件 */}
              <div className="canvas-area" onClick={handleShiftClick}>
                按住Shift点击这里缩放
              </div>
            </div> 
            <TransformComponent></TransformComponent> 
          </> 
        )
      }} 
    </TransformWrapper> 
  </div> 
);

注意点 #

• 不管用哪种方案，都要确保event参数被正确传递到handleShiftClick中，否则event.shiftKey会因为event未定义而抛出错误。
• 使用useRef方案时，建议在调用方法前检查zoomMethodsRef.current是否存在，避免组件初始化阶段还未赋值就调用方法导致的报错。

内容的提问来源于stack exchange，提问作者Dark star