如何使用useEffect在React中创建粘性标头
如何使用useEffect在React中创建粘性标头
提问于 2020-03-31 16:10:14
我正在尝试使用useEffect钩子创建一个响应中的粘性头。我认为问题在于我的IF语句逻辑，但它只是直接超越了我的头脑。
我的肚脐似乎很好的滚动过去，但当滚动回顶部时，它不会“不坚持”。控制台日志记录“卡住”显示它似乎没有从错误中改变.
const [ stuck, setStuck ] = useState(false);
useEffect(() => {
window.addEventListener('scroll', (e) => {
console.log(stuck);
if (stuck === false) {
if (window.pageYOffset > 131) {
setStuck(true);
console.log('stuck');
}
} else {
if (window.pageYOffset < 131) {
setStuck(false);
console.log('unStuck');
}
}
});
}, []);还给我一个大概是这样的肚脐.
<div
className={classes.Links}
style={
stuck ? (
{ position: 'fixed', top: '0', width: '100%', left: '0' }
) : (
{ left: toggle ? '0' : '-100%' }
)
}>
<ul></ul>
</div>任何帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-31 18:14:11
所以这是个棘手的问题。当您使用useEffect钩子时，它会得到函数中变量的当前实例的闭包，因此在第一次传递时，stuck变量被设置为false的默认值，useEffect中的箭头函数将得到该值的闭包。
当调用setStuck时，它将更改组件状态并导致重发。此新呈现将再次运行您函数中的所有逻辑。它将调用useState，这将返回stuck的存储值(现在为真)，但它将此存储在一个新的引用中。在您的示例中，useEffect没有依赖项，因此不会在后续呈现时执行它。添加到事件侦听器中的函数自上次运行以来仍然对函数的版本有一个闭包，因此，就事件侦听器而言，仍然是等于false。它的闭包来自于函数的前一个版本。
在大多数简单的情况下，您只需要添加stuck作为对useEffect调用的依赖项。这将导致在stuck更改时重新运行它，并且它将重新添加回调，并为正确的值添加一个新的闭包。这里的问题是，每次要更改状态时，都必须删除回调。
因此，我建议您在调用setStuck时，还可以使用该时间删除回调处理程序。然后会发生一个重命名器并将其添加回，但现在对正确的值进行闭包。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60954997
复制相关文章
相似问题
腾讯云开发者
