javascript - 在 React 的生命周期方法之外添加类名

Question

我正在尝试向 React 中的组件添加一个类，

  componentDidMount() {
      console.log(document.getElementById('mainNav').scrollTop);

          let element = document.getElementById('mainNav')
          if (element.scrollTop  > 100) {
             element.classList.add("navbar-scrolled")
          }

  }

我很欣赏这不起作用，因为当安装组件时，scrollTop = 0并且没有检查它，因此不会在滚动时被拾取...

我的问题是，我应该把它放在哪里以确保它在滚动时被拾取，如何在发生变化时动态检查scrollTop？

Answer 1

将其放入scroll监听器中:

componentDidMount() {
  let element = document.getElementById('mainNav')
  this.scrollListener = () => {
    if (element.scrollTop > 100) {
      element.classList.add("navbar-scrolled");
    }
  }
  window.addEventListener("scroll", this.scrollListener);
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.scrollListener);
}