Question

我有一个 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 删除。以下是我在此官方 documentation 的帮助下尝试做出反应的方式。

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 钩子很好地做出反应。

Answer 1

您应该在 useEffect 钩子中添加事件侦听器，以确保您在分配给 dom 元素后访问 ref。

WITH tree AS (SELECT distinct(ic.parent_item_id) FROM dbo.item_combination ic, dbo.product p WHERE ic.child_item_id != p.item_id 
                UNION ALL
                SELECT ic.parent_item_id FROM tree t, dbo.item_combination ic WHERE t.parent_item_id=ic.child_item_id
             )
SELECT DISTINCT (parent_item_id) from tree

如何在 React Functional 组件中正确使用 useRef 钩子？

1 个答案: