0

我只是想在反应弹簧渲染道具和基于钩子的方法之间移动。

对于大多数情况，解决方案非常简单，因为我必须使用的值可以直接动画化。

在一个特殊情况下，我必须为地图运动和缩放设置动画，并且我可以获得初始值和最终值。我注意到，渲染道具和基于钩子的方法之间的区别在于，Spring 给出的道具给了我可以传递给我的地图组件的实际值，而在基于钩子的方法中，道具是 AnimatedValue。现在我的组件采用了实际值，因此我无法进一步使用基于钩子的方法。

所以我有一个世界地图组件，它采用道具中心和缩放。center 是 [number,number] 格式的坐标，zoom 是一个数字。

<WorldMap
  data={data}
  height={height}
  width={width}
  center={[x, y]}
  zoom={z}
  onMarkerClick={handleMarkerClick}
/>

现在，当我使用渲染道具方法对其进行动画处理时，它可以按预期工作。

<Spring to={springTo} from={springFrom}>
    {({ z, x, y }) => {
      console.log(x, y, z);
      return (
        <WorldMap
          data={data}
          height={height}
          width={width}
          center={[x, y]}
          zoom={z}
          onMarkerClick={handleMarkerClick}
        />
      );
    }}
  </Spring>

因为我相信渲染道具 x,y 和 z 是数字（实际值）

对于基于钩子的代码，我使用的是：

const AWM = animated(WorldMap);
const { x, y, z } = useSpring({ ...springTo, from: { ...springFrom } });

渲染部分是这样的：

<AWM
    data={data}
    height={height}
    width={width}
    center={[x, y]}
    zoom={z}
    onMarkerClick={handleMarkerClick}
  />

我正在附加两个沙箱（基于 RenderProps 和基于钩子）

任何有助于理解这一点的帮助将不胜感激。

钩子：https ://codesandbox.io/s/0q8yjrz63l

渲染道具：https ://codesandbox.io/s/69114nj5k

同样在基于钩子的方法中，我收到错误警告：无法给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

加上一些错误，考虑到这些值是动画值

我在这里先向您的帮助表示感谢。

4

0 回答 0