Next.js中react-zoom-pan-pinch使用的两个问题求助

问题1：useTransformContext 提示必须在 TransformWrapper 内部使用 #

你直接在TransformWrapper的渲染回调顶层调用useTransformContext不符合React钩子的使用规则，这个钩子必须放在被TransformWrapper包裹的子组件顶层才能正常工作。

解决方法：把需要使用上下文的逻辑抽成独立子组件，在子组件内部调用useTransformContext，再将子组件放在TransformComponent中。

示例代码：

// 自定义子组件
const CanvasContent = () => {
  const context = useTransformContext();
  console.log(context); // 此处可正常获取上下文状态
  return <div>...</div>;
};

// 原组件中的使用
<TransformWrapper
  limitToBounds={false}
  centerZoomedOut={true}
  minScale={0.5}
  maxScale={2}
  panning={{ excluded: ['input'] }}
  doubleClick={{disabled: true}}
>
  {({zoomIn, zoomOut, setTransform, resetTransform, ...rest}) => {
    actionReset = resetTransform;
    increaseZoom = zoomIn;
    decreaseZoom = zoomOut;
    setScale = setTransform;

    return (
      <TransformComponent wrapperClass="project-global-canvas-area">
        <CanvasContent /> {/* 放入自定义子组件 */}
      </TransformComponent>
    );
  }}
</TransformWrapper>

问题2：调用 setTransform 无效果且报 NaN 错误 #

你调用setScale(100, 100, 1.5)的参数顺序错误，导致内部计算出现NaN。setTransform的正确调用方式有两种：

• 传入包含x、y、scale属性的对象
• 按scale, x, y的顺序传参

正确调用示例：

// 方式1：传递配置对象
setScale({ x: 100, y: 100, scale: 1.5 });

// 方式2：按 scale → x → y 的顺序传参
setScale(1.5, 100, 100);

另外注意你设置了maxScale={2}，所以scale值1.5在允许范围内，如果超过2会被自动限制为maxScale的值。

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