如何阻止componentDidMount中绑定的scroll函数在路由切换后执行？

这个问题很典型——你给window绑定了scroll事件监听，但组件卸载（比如切换到其他页面）时没有清理这个监听，导致scroll事件触发时，代码尝试操作已经不存在的DOM元素，自然就抛出TypeError: Cannot read property 'firstChild' of null错误了。这里给你一套完整的修复方案：

1. 在组件卸载时移除事件监听 #

React提供了componentWillUnmount生命周期方法，它会在组件被卸载前执行，正好用来清理这类全局事件监听。你只需要在组件中添加这个方法，移除之前绑定的scroll事件：

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

这样一来，当你切换页面时，当前组件会被卸载，同时scroll事件监听也会被移除，就不会再触发handleScroll函数了。

2. 优化DOM操作的容错性（可选但推荐） #

为了避免一些边界情况（比如监听没及时移除的极端场景），你可以在handleScroll里先检查目标元素是否存在，再执行后续操作：

handleScroll = (event) => { 
  const blogpost = document.getElementById("blogpost");
  // 先判断元素和它的firstChild是否存在，不存在就直接返回
  if (!blogpost || !blogpost.firstChild) return;

  if (window.scrollY < 201){ 
    const pxScrolled = window.scrollY; 
    const opValue = (200 - pxScrolled)*0.005; 
    blogpost.firstChild.style.opacity = opValue; 
  } else if (window.scrollY > 201){ 
    blogpost.firstChild.style.opacity = "0"; 
  }
}

3. 更符合React范式的方案：使用Ref替代getElementById #

直接用document.getElementById并不是React推荐的DOM操作方式，你可以通过React的Ref来获取目标元素，这样更可靠，也更贴合组件的生命周期：

首先在组件的构造函数里创建Ref：

constructor(props) {
  super(props);
  this.blogpostRef = React.createRef();
}

然后在render方法中，把Ref绑定到目标元素上：

render() {
  return (
    <div id="blogpost" ref={this.blogpostRef}>
      {/* 你的子元素内容 */}
    </div>
  );
}

最后修改handleScroll函数，通过Ref获取元素：

handleScroll = (event) => { 
  const blogpost = this.blogpostRef.current;
  if (!blogpost || !blogpost.firstChild) return;

  if (window.scrollY < 201){ 
    const pxScrolled = window.scrollY; 
    const opValue = (200 - pxScrolled)*0.005; 
    blogpost.firstChild.style.opacity = opValue; 
  } else if (window.scrollY > 201){ 
    blogpost.firstChild.style.opacity = "0"; 
  }
}

这种方式下，当组件卸载时，this.blogpostRef.current会自动变为null，结合componentWillUnmount的清理操作，能彻底避免这类错误。

内容的提问来源于stack exchange，提问作者srdjan_susa