当页面包装在 100vh 元素中时，React 钩子不起作用答案

【问题标题】：React hook not working when page is wrapped in a 100vh element当页面包装在 100vh 元素中时，React 钩子不起作用
【发布时间】：2022-01-22 23:44:33
【问题描述】：

这可能非常具体，但我已经拉了一个多星期的头发，所以我不得不问。

*** 编辑：我在代码和框中重新生成了这个错误（？），所以你可以自己检查它： https://codesandbox.io/s/react-playground-forked-51r5n （该按钮只是为视差包装器组件添加/删除一个类以轻松显示差异）

*** edit2：我认为这与以下内容有关：在 App.js 中，有 2 个组件，Nav 组件和 ParaWrapper 组件。我相信，因为我给 ParaWrapper 的高度为 100vh，所以 Nav 在技术上没有剩余高度（？）。我仍然可以在元素检查器中看到导航，如果我手动添加淡入类，它会按预期工作。也许这是有人解开这个谜题的线索？

情况：反应钩子不起作用。我的页面包含一个视差（仅限 scss）英雄部分（2 层，1 个基础层和 1 个背面层），然后是其他几个常规部分。更具体地说：在我的导航栏组件中，我使用 useeffect 来确定我是否已经滚动了 > 50 像素，如果是，则删除并添加类到我的导航栏以使用动画显示/隐藏它。我花了一段时间才找出导致问题的原因，但似乎当我删除（或注释掉）para-wrapper 组件的高度时，导航栏动画按预期工作（useeffect 挂钩正在工作），但视差效果将停止工作。

我也尝试过使用 useState 钩子，但这是同样的问题； set navbar classes 在设置高度时不起作用（并且在未设置时起作用，但随后又失去了视差效果）。

在元素检查器中，当高度：100vh 在 para-wrapper 上处于活动状态时，我可以看到类未正确应用，但在移除高度时它确实有效（这意味着代码有效，但不知何故它被阻止了） .

编辑了这个问题并删除了此处的所有代码，因为我添加了一个可查看的项目，以便您可以使用它*

非常感谢您的关注，我希望你们中的一些人可以在这里找到问题。问候

【问题讨论】：

那肯定是很多代码。你确定这是minimal reproducible example 吗？无论如何，看起来您只是在 Nav 中第一次渲染时选择了 nav 元素。一旦 React 更新了 DOM，那个元素（和它的监听器）就会消失，并且会插入一个新的元素（没有监听器）。我怀疑这是你问题的根源。
这个话题有帮助吗？ stackoverflow.com/questions/44768695/…
@samuei 当我关闭视差包装器的高度时，代码按预期工作（在我实现视差效果之前它工作得很好）。我只选择导航元素（它是子元素），因为该元素是我想要在页面上滚动时取消隐藏/隐藏的元素。

标签： reactjs sass react-hooks use-effect parallax

【解决方案1】：

我找到了问题的答案！最后。什么为我指明了正确的方向，这个主题的答案是什么：

Not getting callback after adding an event listener for scroll event in React.js

完整的答案包括几个修复。首先，我必须将事件监听器从 Nav 组件移动到 Hero 组件（呃，否则它只会在滚动 Nav 组件时监听）。其次，我不得不使用滚动的元素，而不是使用 window.addEventListener（所以在这种情况下，一个变量引用了 para-wrapper 元素）。最后，window.scrollY 始终保持为 0，因此我必须在此处将 window.scrollY 更改为（参考 para-wrapper 元素的变量）.scrollTop！

【讨论】：