React useEffect自定义布局组件的奇怪行为

Question

我正在尝试在我的web公文包中使用动画的滚动位置。由于这个公文包使用nextJS，我不能依赖窗口对象，而且我使用的是导航范围的滑块，所以我实际上不是在窗口中滚动，而是在一个名为Page的布局组件中滚动。

import React, { useEffect } from 'react';
import './page.css';
const Page = ({ children }) => {
useEffect(() => {
const scrollX = document.getElementsByClassName('page')
const scrollElement = scrollX[0];
console.log(scrollX.length)
console.log(scrollX)
scrollElement.addEventListener("scroll", function () {
console.log(scrollX[0].scrollTop)
});

return () => {
scrollElement.removeEventListener("scroll", () => { console.log('listener removed') })
}
}, [])

return <div className="page">{children}</div>;
};
export default Page;

这是一个生产构建：https://next-portfolio-kwn0390ih.vercel.app/

加载时，DOM中只有一个Page组件。

行为如下：

• 第一个监听器是在第一个页面装载时添加的，在导航时，监听器也会与DOM中的一个新页面组件一起添加
• 只要在两个页面之间导航，就不会添加新的侦听器/页面
• 如果导航到第三个页面，则在卸载旧页面时将删除侦听器，并在装载第三个网页时添加第三个页的新侦听器(等等(

问题是：当你从第一个导航到第二个时，一切看起来都很好，但如果你回到第一个页面，你会注意到控制台记录的是第二个监听器的scrollX值，而不是第一个。每次进入第二个页面时，似乎都会向同一个scrollElement添加另一个监听器，即使它不是同一个page组件。

我该怎么做？我猜这两个组件在某种程度上试图访问同一个scrollElement：/

谢谢你抽出时间。

Answer 1

酷网站。我们没有完整的信息，但我怀疑尝试使用document.getElementsByClassName('page')[0]有问题。当您转到第2页时，scrollX的日志会给出一个包含2个元素的HTMLCollection。因此，有一个问题是，哪一个是目标。我会考虑用裁判代替。像这样：

import React, { useEffect, useRef } from 'react';
import './page.css';
const Page = ({ children }) => {
const pageRef = useRef(null)
const scrollListener = () => {
console.log(pageRef.current.scrollTop)
}
useEffect(() => {
pageRef.addEventListener("scroll", scrollListener );

return () => {
pageRef.removeEventListener("scroll", scrollListener )
}
}, [])

return <div ref={pageRef}>{children}</div>;
};
export default Page;

这要干净得多，我认为这将减少组件之间关于每个滚动侦听器引用哪个dom元素的混乱。到第三页为止，您的scrollX仍在记录相同的HTMLElement集合，其中包含2个元素。根据你的模式，应该有3个。(尽管实际上应该只有1个！(所以第3页上出现了一些错误。如果我们看到更多的代码，它可能会发现错误是其他原因。如果参考文献没有解决这个问题，你能发布Page是如何在更大范围内实现的吗？

^{还删除"；"初级"；从"；初级开发者"；title-你不会后悔的}