페이지를 변경 한 후 이벤트 마운트 해제

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)를 제거하고 이벤트 listner를 추가 할 때마다 매번 새로운 함수가 생성됩니다. 그래서 지금 내 제거 이벤트 리스너는 이제 다음과 같습니다

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); 
}