功能 gatsby/react 组件内滚动功能的参考元素

Question

我想在 Gatsby 中制作粘性导航。我可以制作一个单独的脚本并引用我需要引用的元素，但这对于组件模式来说似乎违反直觉。

所以我想从组件内部引用元素，但是我碰壁了。如果我使用 document.querySelector(".primaryNavigation") 我得到 null，所以我的问题是：

如何从如下所示的功能组件中引用组件元素？

export default function PrimaryNavigation() {
  window.onscroll = () => {
    // reference the nav element here
  }
  return (
    <nav className="primaryNavigation">
      <ul>
        <li>
          <Link to="/blog">Blog</Link>
        </li>
      </ul>
    </nav>
  );
}

Answer 1

正如 Derek 所建议的，我应该研究并使用 ref

我将在此处展示我如何解决该问题的示例。

export default function Navigation() {
  const nav = React.createRef();

  window.onscroll = function() {
    if(window.pageYOffset > nav.current.offsetTop)
      nav.current.style = "position:fixed;top:0;width:100%";
    else
      nav.current.style = "";
  }

  return (
    <nav ref={nav}>
      <ul>
        <li><Link to="/whatever">Whatever</Link></li>
      </ul>
    </nav>
  );
}

功能 gatsby/react 组件内滚动功能的参考元素

Reference elements for a scroll function inside functional gatsby/react component

functional-programming

reactjs

gatsby