达到 IntersectionObserver 阈值时调用 setState？答案

【问题标题】：Calling setState when IntersectionObserver threshold is reached?达到 IntersectionObserver 阈值时调用 setState？
【发布时间】：2020-09-13 02:44:14
【问题描述】：

我正在使用 react-spring 和 IntersectionObserver 为我的页面上的一些 div 元素设置动画。

对于IntersectionObserver，我使用的是教程here给出的钩子。

CodeSandbox

虽然我能够让 div 自行旋转 (onClick)，并且 useIntersect 工作 - 我无法在 a 部分出现时触发旋转。我尝试过使用setState，就像我对onClick 所做的那样，但这不起作用，因为entry.isIntersecting 属性在每次重新渲染期间都会触发多次。

当达到 IntersectionObserver 阈值时，如何使用 react-spring 让 div 旋转？

【问题讨论】：

标签： javascript reactjs intersection-observer react-spring

【解决方案1】：

您可以向 useIntersect 添加一个回调参数。并在更新条目时调用它。但这对我不起作用，因为在每次渲染中都会调用回调，并且您想在回调中触发渲染。所以它导致了我一个无限循环。所以我建议使用其他东西。

为此，我通常使用 react-waypoint。它的使用很简单。

  <GenerateSection />
  <Waypoint
    onEnter={() => set((flipped) => !flipped)}
    onLeave={() => console.log('leave')}
  />
  <GenerateSection />

如果您只想使用 useIntersect 来触发动画，那么您可以删除它，因为它是不必要的。

https://codesandbox.io/s/hopeful-dhawan-nr5np?file=/src/App.js

【讨论】：