Question

我在组件中有一些代码，用于检测滚动时该组件是否可见。该代码如下：

    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），因为它们每次都在创建一个新函数。所以现在我的remove事件监听器现在看起来像这样：

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

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

Answer 1

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

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

构造函数代码现在看起来像这样：

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

然后componentDidMount现在看起来像这样：

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

更改页面后卸载事件

1 个答案: