Question

我只是想在React Spring渲染道具和基于钩子的方法之间切换。

在大多数情况下，解决方案非常简单，因为我不得不说我必须使用的值可以直接设置动画。

在一种特殊情况下，我必须对地图运动和缩放进行动画处理，然后才能获得初始值和最终值。我注意到，renderprops和基于钩子的方法之间的区别在于，Spring给出的道具为我提供了可以传递给Map组件的实际值，而在基于钩子的方法中，道具是AnimatedValue。现在，我的组件采用了实际值，因此无法继续使用基于钩子的方法。

因此，我有一个以道具为中心并缩放的世界地图组件。中心是[数字，数字]格式的坐标，缩放是数字。

<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

也在基于钩子的方法中我得到了错误警告：不能为功能组件提供参考。尝试访问此引用将失败。您是要使用React.forwardRef（）吗？

考虑到值是动画值，还会出现一些错误

非常感谢您的帮助。

动画对弹簧产生反应（带有挂钩vs渲染道具）

0 个答案: