我有一个滚动事件监听器,并且想根据页面URL删除它,如何在 Hook 组件中使用它呢?
useEffect(() => {
function handleScrollEvent() {
if (window.scrollY > 100) {
setHeaderIsVisible(true);
} else {
setHeaderIsVisible(false);
}
}
if (props.location.pathname === "/") {
window.addEventListener("scroll", handleScrollEvent, true);
} else {
window.removeEventListener("scroll", handleScrollEvent, true);
}
}, [props.location.pathname]);
我应该在哪里定义handleScrollEvent以便将其从监听器中删除?
最佳答案
您需要做的是每次添加它,也将其删除。
当props.location.pathname
更改时,它将删除事件监听器。
useEffect(() => {
if (props.location.pathname === "/") {
function handleScrollEvent() {
if (window.scrollY > 100) {
setHeaderIsVisible(true);
} else {
setHeaderIsVisible(false);
}
}
window.addEventListener("scroll", handleScrollEvent, true);
// every time you add it, you also remove it when props.location.pathname changes
return () => {
window.removeEventListener("scroll", handleScrollEvent, true);
}
}
}, [props.location.pathname]);