React.js를 사용하여 탭 한도 구현 시 문제

React 프로젝트 개발에는 페이지가 탭 위치로 스크롤될 때 탭이 상단에 고정되어야 한다는 요구 사항이 있습니다.

구현 아이디어는 실제로 매우 간단합니다. 즉, 스크롤 거리(scrollTop)가 탭과 페이지 offsetTop 상단 사이의 거리보다 큰 경우를 결정하고 탭 위치를 고정으로 변경하는 것입니다.

반응에서는 상태에 navTop 속성을 설정하고 이 속성의 값을 true 또는 false로 전환한 다음 탭 태그의 classnames() 메서드를 사용하여 navTop의 값을 사용하여 고정된 클래스 이름을 추가합니다.

처음에는 이렇게 썼습니다.

import cs from 'classnames';

class FixedTab extends React.Component{
  constructor(props){
      super(props);      
      this.state = {
        navTop: false
      }      this.$tab = null;      this.offsetTop = 0;
  }

  componentDidMount(){    this.$tab = this.refs.tab;    if(this.$tab){      this.offsetTop = this.$tab.offsetTop;
      window.addEventListener('scroll',this.handleScroll);
    }
  }

  handleScroll(){
    let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;    if(sTop >= this.offsetTop){       this.setState({
         navTop: true
       })
    }    if(sTop < this.offsetTop){       this.setState({
         navTop:false
       })
    }
  }

  render(){    return(       <p ref="tab" className={cs({&#39;fixed&#39;:this.state.navTop})}></p>    )
  }  
}

그러다가 이렇게 쓰는데 문제를 발견했습니다. 스크롤바의 스크롤 거리가 해당 조건에 도달했을 때 탭이 천장 효과를 보였지만 순식간에 회복되었습니다. . 스크롤 막대도 다시 튀어 나와 더 이상 아래로 스크롤할 수 없습니다.

처음에는 판단 논리에 문제가 있는 줄 알았으나 도저히 해결책을 찾을 수 없었습니다. 나중에는 상태 값 변경 사이의 시간 차이로 인해 발생한 것이라고 의심했습니다. 그런 다음 스크롤 거리를 판단하기 전에 값을 추가했습니다. navTop의 상태를 확인합니다.

주로 수정된 코드는 다음과 같습니다.

handleScroll(){
    let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;    if(!this.state.navTop && sTop >= this.offsetTop){       this.setState({
         navTop: true
       })
    }    if(sTop < this.offsetTop){       this.setState({
         navTop:false
       })
    }
  }

이 수정 후에는 천장 효과가 정상적으로 작동됩니다.

위 내용은 React.js를 사용하여 탭 한도 구현 시 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!