javascript - 仅在 React.Js 中更改主页上滚动的标题组件的样式

Question

我使用以下方法来更改滚动标题的样式，效果很好。引用了这个answer

  state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY < 84
      if (!isTop) {
        this.setState({
          scrolled: true
        })
      } else {
        this.setState({
          scrolled: false
        })
      }
    })
  }

  componentWillUnmount() {
    window.removeEventListener('scroll')
  }

问题是它适用于每个路由(组件)，因为我在 App.js 文件中包含 header 组件，但我希望它仅在主页上工作。

有没有办法检查当前路由并在标题上执行此转换，仅适用于与我当前方法一起使用的主页组件，或者我是否需要完全更改我的方法？

Answer 1

您应该创建一个处理滚动的方法，并在 addEventListener 和 removeEventListener 中引用它。但在您的示例中，您没有引用它。您可以像下面的代码示例一样使用它。

并且您应该使用条件来匹配仅在主页上有效的 URL。

state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const isTop = window.scrollY < 84
    if (!isTop) {
      this.setState({
        scrolled: true
      })
    } else {
      this.setState({
        scrolled: false
      })
    }
  })