使用react-zoom-pinch-pan的useTransformEffect遇上下文错误求助

错误原因 #

useTransformEffect 是依赖 TransformWrapper 提供的上下文运行的钩子，必须在 TransformWrapper 组件的子组件（或子组件的自定义钩子）中调用。如果在 TransformWrapper 外部直接使用该钩子，就会抛出「Transform context must be placed inside TransformWrapper」的错误。

解决方案 #

你需要将调用 useTransformEffect 的组件，嵌套在 TransformWrapper 内部，让钩子能获取到所需的上下文。

完整代码示例 #

import { TransformWrapper, TransformComponent, useTransformEffect } from 'react-zoom-pinch-pan';

// 自定义子组件，在其中使用useTransformEffect
function ZoomControlledContent() {
  useTransformEffect(({ state, instance }) => {
    console.log(state); // { previousScale: 1, scale: 1, positionX: 0, positionY: 0 }

    return () => {
      // 组件卸载时的清理逻辑
    };
  });

  return <div>需要缩放/平移的目标内容</div>;
}

// 父组件中用TransformWrapper包裹子组件
function App() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <ZoomControlledContent />
      </TransformComponent>
    </TransformWrapper>
  );
}

export default App;

关键注意点 #

• TransformWrapper 是上下文提供者，必须作为所有使用该库钩子或组件的顶层父容器
• TransformComponent 是承载可缩放内容的容器，你的自定义组件需要放在它内部（或它的子层级中）
• 确保 useTransformEffect 的调用位置处于 TransformWrapper 的上下文范围内，不能在这个范围外直接调用

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