React.js を使用してタブの天井を実装する際の問題

React プロジェクトの開発では、ページがタブの位置までスクロールするときに、タブが上部に固定される必要があるという要件があります。

実装のアイデアは実際には非常に簡単で、スクロール距離scrollTopがタブとページ上部の間の距離offsetTopよりも大きい場合を判断し、タブの位置を固定に変更するというものです。

反応では、状態に navTop 属性を設定し、この属性の値を true または false に切り替えてから、tab タグの 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 中国語 Web サイトの他の関連記事を参照してください。