React - 组件在滚动时未正确更新答案

【问题标题】：React - components not updating correctly on scrollReact - 组件在滚动时未正确更新
【发布时间】：2018-12-23 02:36:25
【问题描述】：

所以我有一个包含几个部分的 React 站点。我想将某些道具传递给这些部分，但前提是它们在视口中。为此，我包含了一个滚动事件侦听器，它应该更改“活动”部分每次window.scrollY 越过活动部分的边界（要么将其留在后面 (window.scrollY > section.getBoundingClientRect().bottom)，要么返回到页面的开头 (window.scrollY < section.getBoundingClientRect().top - window.innerHeight)）。

问题是，它似乎不起作用。

这里是演示：https://codepen.io/LuisChDev/pen/REVPWd?editors=0112

关于为什么代码不起作用的任何想法？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题在于您设置滚动侦听器的方式：

const {curSec} = this.state;
window.addEventListener("scroll", () => {
  if (window.scrollY > boundaries[curSec].bottom - 80) {
  ...

此时，curSec 为 0。cursec 不会在滚动处理程序内自动更新，因此您只是为第一个 div 设置边界。

你应该把它改成这样：

window.addEventListener("scroll", () => {
  boundaries.forEach((boundary, i) => {
    if (window.scrollY > boundary.top) {
      this.setState({ curSec: i });
    }
    else if (window.scrollY > boundary.bottom + 20) {
      this.setState({ curSec: i - 1 });
    }
  });
});

codepen

你的边界检查也不起作用，所以我稍微调整了一下。这样，滚动侦听器实际上会检查所有 div 的边界，而不仅仅是第一个。

但是，您应该查看 Intersection Observer，因为它的本意就是这样做，但性能更好。

另外，给你一个小提示：不要不断更新你共享到 stackoverflow 的 codepen - 你应该将你的代码粘贴到问题中并链接到一个新的 codepen fork。

【讨论】：

非常感谢。抱歉编辑示例。以后我会记得分叉的。
@MyNameIsMethos 我很高兴它有帮助！一旦你开始工作了，看看 React 中“ref”的用法reactjs.org/docs/refs-and-the-dom.html

【解决方案2】：

您的边界对象的顶部和底部属性为undefined。

document.getElementById(x).getBoundingClientRect.top

改成

document.getElementById(x).getBoundingClientRect().top

【讨论】：

感谢您的回答。我已经改变了它们，不确定你是否能看到 - 它第一次确实有效，但是当我进一步移动它时它不会再次改变，或者当我回去时。您知道导致这种行为的原因吗？