如何确保页面在使用 React Scroll for React JS 在屏幕上刷新

Question

我正在使用 React Scroll 滚动到我应用程序中的各种组件。我正在使用"gsap"进行动画，并想知道每次滚动到该组件时是否可以刷新页面(对于所需的组件(。目的是在每次登陆组件页面时初始化我的"gsap"动画。

我正在使用反应钩子，到目前为止已经尝试了useEffect和window.location.reload((没有乐趣;

Answer 1

您可以使用反应航点在特定滚动位置触发事件。该事件在用户滚动或自动滚动时触发。您只需要将航点组件放置在页面中的某个位置，就可以在该组件可见时触发事件。例如：

const [animatedComponentVisible, setAnimatedComponentVisible] = React.useState(false);
return (
// somwhere deep in your page
<Waypoint
onEnter={() => setAnimatedComponentVisible(true)}
/>
{animatedComponentVisible && <AnimatedComponent>}
)

它能解决你的问题吗？