Question

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

所以我想从组件内部引用Element，但是碰到了墙。如果我使用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>
  );
}

功能性盖茨比/反应组件内部滚动功能的参考元素

1 个答案: