让我解释一下我一整天都在解决的问题。我有一个带有标题的网站，它当然有通过反应路由器链接到其他页面(主页、项目、关于、服务、联系人(。在"/projects"页面和"/"(主页(中有一个Project组件。
我想在Project.js组件中制作一个简单的动画，这取决于是否有"垂直"道具。显然->在"/projects"中，我想在滚动上做动画，而不是在其他页面上。
尝试通过在useEffect中添加if语句来完成此操作，但它不起作用，给我一个错误"无法读取nullref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;的属性"style">
当我在页眉中更改页面时，这个问题就会出现。例如，我在"/projects"滚动中，动画正常工作，然后转到"/"，当滚动出现错误时，我在上面显示了。
这就像我的if语句不起作用，当我在"/"中时，哪个项目组件具有props vertical=｛false｝，而我不想这样做时，它正在滚动制作动画。
我想要什么？我想使用useEffect制作动画，前提是组件有一个道具"垂直"，如下所示：
Project.js组件代码：
const Project = ({ image, className, vertical }) => {
const ref = useRef(null);
const [isVertical, setIsVertical] = useState(vertical);
useEffect(() => {
console.log('component did mount');
isVertical
? window.addEventListener('scroll', () => {
ref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;
})
: console.log('non-vertical');
}, [isVertical]);
useEffect(() => {
return () => console.log('unmount');
});
return <StyledProject image={image} className={className} vertical={vertical} ref={ref} />;
};
在家"/"：
{images.map(({ image, id }) => (
<Project key={id} image={image} />
))}
在"/个项目"中：
{images.map(({ image, id }) => (
<StyledProject vertical image={image} key={id} />
))}
当我在路径"/projects"中并转到另一个路径时出错。这就像在"/projects"中保存所有语句一样，但我希望在每一页上重置useEffect和ref.current
请帮帮我，我不能再往前走了，因为我不解决这个问题。
提前谢谢。
主要问题是在组件卸载时没有删除事件侦听器。
在这里你可以看到一个如何做到这一点的例子