javascript - 如何在反应功能组件中正确使用 useRef 挂钩?
问题描述
我有一个 JavaScript 片段,我正在尝试在 react 中实现它。这是片段。
const nav = document.querySelector('.nav');
window.addEventListener('scroll', fixNav);
function fixNav() {
if (window.scrollY > nav.offsetHeight) {
nav.classList.add('active');
} else {
nav.classList.remove('active');
}
}
有关该片段的更多详细信息,请参阅此codepen。当我滚动时,我只是向 an 元素添加一个类,并在满足特定条件时使用scroll eventListerner
. 以下是我在此官方文档的帮助下尝试做出反应的方式。
const Navbar = () => {
const navbar = useRef(null)
window.addEventListener('scroll', () => {
if (window.scrollY > navbar.current.offsetHeight + 550) {
navbar.current.classList.add('active');
}else{
navbar.current.classList.remove('active');
}
});
return (
<Fragment>
<nav id='navbar' className="nav" ref={navbar}>
<div className="container">
<h1 className="logo"><a href="/index.html"></a>My Website</h1>
<ul>
<li><a href="#" className="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
{/* other elements */}
</Fragment>
)
}
错误
TypeError: Cannot read property 'offsetHeight' of null
navbar
因此,当我实际滚动并且满足条件时,我试图获取的元素将变为 null。当 console.log 和错误同时出现时,我可以在控制台中看到导航栏元素。我确定我在幕后遗漏了一个基本概念。
如果我试图在安装组件之前获取 DOM 元素,我必须使用useEffect
它来正确处理它。我是新来的反应,不能用useEffect
钩子给它一个好的镜头。
解决方案
您应该在 useEffect 挂钩中添加事件侦听器,以确保您在分配给 dom 元素后访问 ref。
const Navbar = () => {
const navbar = useRef(null);
useEffect(()=>{
window.addEventListener("scroll", () => {
if(navbar.current!==null){
if (window.scrollY > navbar.current.offsetHeight + 550) {
navbar.current.classList.add("active");
} else {
navbar.current.classList.remove("active");
}
}
});
},[]);
return (
<Fragment>
<nav id="navbar" className="nav" ref={navbar}>
<div className="container">
<h1 className="logo">
<a href="/index.html"></a>My Website
</h1>
<ul>
<li>
<a href="#" className="current">
Home
</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
{/* other elements */}
</Fragment>
);
};
推荐阅读
- javascript - 将对象数组分组并添加到复杂对象:Javascript
- angular - 等待通过 API 在构造函数中启动的数据被填充
- excel - 使用VBA识别一定范围内的第一个空列
- drawing - SwiftUI:带有内部笔划的楔形
- azure - Azure IOTEdge-网关身份验证错误
- c# - 注册 DbContext 服务
- apache - 在 .htaccess 中设置 RewriteRule 后,网站显示一个空白页面
- mysql - 为什么这个 SUM 是所有分数,而不仅仅是最好的 5 分?
- spring-boot - Spring Boot MVC - 我们是否需要将 @Valid 与 BindingResult 一起使用?
- angular - 如何捕捉角度(离子)中的http错误?