如何编写在项目创建的 create-react-app 的单页反应路由器上工作的 JS

Question

我正在处理一个单页反应项目。 我想在我的一个页面（产品页面）上隐藏 header。 我在我的向下滑动组件中为此编写了下面的代码，该组件放置在我想隐藏 header 的页面上。 但是当我加载产品页面时，代码也可以在其他页面上运行。 我的向下滑动组件放置在产品页面，我在其他页面遇到此错误： TypeError: Cannot read property 'style' of null

有关于这个问题的gif：
图片链接： https://imgur.com/YP43PbO
直接链接： https://i.imgur.com/YP43PbO.gifv

 useEffect(() => { let prevScrollpos = window.pageYOffset; window.onscroll = function() { let currentScrollPos = window.pageYOffset; let headerH = document.getElementById("header").clientHeight if (prevScrollpos > currentScrollPos) { document.getElementById("header").style.top = "0"; document.getElementById("slide-down").style.top = `${headerH}px`; } else { document.getElementById("header").style.top = `-${headerH}px`; document.getElementById("slide-down").style.top = "0"; } prevScrollpos = currentScrollPos; } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

只有当该 id 存在时，您才需要执行您的代码。

我想到了两种方法。 第一个是使用“try catch”语句。 另一种是在执行这些命令之前检查 id 是否存在。

请注意，我同意第二种解决方案

解决方案一（尝试并抓住）：

useEffect(() => {
  let prevScrollpos = window.pageYOffset;
  window.onscroll = function () {
    try {
      let currentScrollPos = window.pageYOffset;
      let headerH = document.getElementById("header").clientHeight
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
        document.getElementById("slide-down").style.top = `${headerH}px`;
      } else {
        document.getElementById("header").style.top = `-${headerH}px`;
        document.getElementById("slide-down").style.top = "0";
      }
      prevScrollpos = currentScrollPos;
    } catch (e) {
      //do nothing or log "e" to console ( console.log(e) )
    }
  }
})

请记住为document.getElementById("header")和document.getElementById("slide-down")创建一个变量，而不是重复几次（就像我在第二个解决方案中所做的那样）。 这样做将提高您的应用程序的性能

解决方案二（检查id是否存在）：

useEffect(() => {
  let prevScrollpos = window.pageYOffset;
  let header = getElementById("header"),
    slide_down = getElementById("slide-down");
  if (header && slide_down) {
    window.onscroll = function () {
      let currentScrollPos = window.pageYOffset;
      let headerH = header.clientHeight
      if (prevScrollpos > currentScrollPos) {
        header.style.top = "0";
        slide_down.style.top = `${headerH}px`;
      } else {
        header.style.top = `-${headerH}px`;
        slide_down.style.top = "0";
      }
      prevScrollpos = currentScrollPos;
    }
  }
})