更改页面后卸载事件答案

【问题标题】：unmount event after changing a page更改页面后卸载事件
【发布时间】：2017-09-21 04:42:05
【问题描述】：

我在一个组件中有一些代码可以检测该组件在滚动时是否可见。该代码如下所示：

    constructor(props) {
      super(props);
      this.handleScrollAnimation = this.handleScrollAnimation.bind(this);
  }

  componentDidMount() {
    this.handleLoadAnimation();
    window.addEventListener('scroll', _.throttle(this.handleScrollAnimation.bind(this), 300));
  }

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

  handleLoadAnimation() {
    const component = this.CalloutBoxes;
    if (this.isElementInViewport(component)) {
      component.classList.add('already-visible');
    }
  }

  handleScrollAnimation() {
    const component = this.CalloutBoxes;
    if (this.isElementInViewport(component)) {
      component.classList.add('animated');
    }
  }

  isElementInViewport(el) {
    const rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
      rect.right > 0 &&
      rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
      rect.top < (window.innerHeight || document.documentElement.clientHeight); /* or $(window).height() */
  }

当我导航到另一个页面时，我收到错误 Cannot read property 'getBoundingClientRect' of null。我不确定我需要做什么来阻止这种情况，也找不到任何可以让我知道我需要做什么的东西。

这是我的组件渲染函数：

    render() {
    const styles = {
      image: {
        backgroundImage: `url(${this.props.data.image})`
      }
    };

    return (
      <div
        ref={c => {
          this.CalloutBoxes = c;
        }}
        className="mini-nav-box"
        >
        <Link to={this.props.data.link}>
          <div style={styles.image} className="mini-nav-box-bg"/>
          <div className="mini-nav-box-content">
            <h3>{this.props.data.title}</h3>
            <p>{this.props.data.copy}</p>
          </div>
        </Link>
      </div>
    );
  }

这是我在页面上调用组件的地方：

{ calloutBoxes.map((box, index) => {
  return <CalloutBoxes key={index} data={box}/>;
})}

编辑：

我看到我必须从删除中删除 .bind(this) 并添加事件侦听器，因为它们每次都在创建一个新函数。所以现在我的删除事件监听器看起来像这样：

window.removeEventListener('scroll', this.scrollFn);

但是我仍然遇到在另一个没有这些组件的页面上触发 isElementInViewport 函数的问题。

【问题讨论】：

标签： javascript reactjs unmount

【解决方案1】：

所以我意识到我非常非常愚蠢。

您需要做的是将去抖动添加到构造函数中并将其从添加事件侦听器中删除。

构造函数代码现在如下所示：

constructor(props) {
  super(props);
  this.handleScroll = _.debounce(this.handleScrollAnimation.bind(this), 300);
}

那么 componentDidMount 现在看起来像这样：

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

【讨论】：