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

Question

我正在做一个单页 React 项目。我想在我的页面之一（产品页面）隐藏 header。我在我的 slide-down 组件中为此编写了下面的代码，该组件位于我想隐藏的页面 header。但是当我加载产品页面时，代码也在其他页面上工作。我的 slide-down 组件放置在产品页面，我在其他页面遇到此错误：TypeError: Cannot read 属性 'style' of null

问题gif有：
imgur link: https://imgur.com/YP43PbO
直接 link: 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是否存在。

Note that I agree with the second solution

解决方案一（试一试）：

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) )
    }
  }
})

Just remember to create a variable for document.getElementById("header") and document.getElementById("slide-down") instead of repeating it several times (just like I did in the second solution). Doing so will improve the performance of your application

方案二（检查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;
    }
  }
})

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

How to write JS which working on single page of react router at project created create-react-app

javascript

css

reactjs

react-router

create-react-app

解决方案一（试一试）：

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