next.js 获取转换上下文

nwlqm0z1 于 2023-05-06 发布在其他

关注(0)|答案(1)|浏览(170)

我有Nextjs应用程序，我使用react-zoom-pan-pinch转换容器之一。

<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;

    const context = useTransformContext();
    console.log(context)

    return (
      <TransformComponent wrapperClass="project-global-canvas-area">
        ...
      </TransformComponent>
    );
  }}
</TransformWrapper>

我有两个问题：
1.我需要访问转换上下文的状态，我使用useTransformContext钩子，但我得到了错误：
服务器错误：转换上下文必须放在TransformWrapper中
我可以把这个钩子放在哪里？
1.我需要状态自定义缩放值以外的变换组件。zoomIn（）和zoomOut（）没有问题，但setTransform（）有问题。
我试着称之为：
setScale(100, 100, 1.5)
但是控制台中的错误没有改变：

检测到NaN设置状态值 *

next.js

来源：https://stackoverflow.com/questions/76153397/get-transform-context

1条答案

按热度按时间

c6ubokkw1#

不确定第二个问题，但第一个问题会发生，因为TransformWrapper中的子元素是一个渲染 prop 。当你在渲染 prop 中使用钩子时，它们是从父组件调用的。在你的例子中，父组件是TransformWrapper，useTransformContext应该从子组件component调用。使用render prop，TransformWrapper是调用useTransformContext的对象。你必须制作一个新的组件来使用渲染 prop 中的所有逻辑

<TransformWrapper
   limitToBounds={false}
   centerZoomedOut={true}
   minScale={0.5}
   maxScale={2}
   panning={{ excluded: ['input'] }}
   doubleClick={{disabled: true}}
 >
   {(params) => <Comp {...params} />}
</TransformWrapper>

const Comp = ({zoomIn, zoomOut, setTransform, resetTransform, ...rest}) => {
  
    actionReset = resetTransform;
    increaseZoom = zoomIn;
    decreaseZoom = zoomOut;
    setScale = setTransform;

    const context = useTransformContext();   // here you will get the value
    console.log(context)

    return (
      <TransformComponent wrapperClass="project-global-canvas-area">
        ...
      </TransformComponent>
    );
}

赞(0）回复(0）举报 2023-05-06

我来回答

next.js 获取转换上下文

1条答案

相关问题

热门标签

最新问答