Probleme bei der Implementierung der Tab-Obergrenze mithilfe von React.js

Bei der Entwicklung von React-Projekten besteht die Anforderung, dass beim Scrollen der Seite zur Position der Registerkarte die Registerkarte oben fixiert sein sollte.

Die Implementierungsidee ist eigentlich sehr einfach: Bestimmen Sie, wann der Bildlaufabstand scrollTop größer ist als der Abstand zwischen der Registerkarte und dem oberen Rand der Seite offsetTop, und ändern Sie die Position der Registerkarte auf „Fest“.

In React setze ich ein navTop-Attribut im Status, ändere den Wert dieses Attributs auf true oder false und verwende dann die classnames()-Methode für das Tab-Tag, um den mit dem Wert festgelegten Klassennamen hinzuzufügen von navTop.

Zuerst habe ich so geschrieben:

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

Dann habe ich festgestellt, dass beim Schreiben so etwas nicht stimmt Die Bedingung: Die Registerkarte hatte einen Decken-Decke-Effekt, der sich jedoch sofort erholte, und auch die Bildlaufleiste prallte zurück, sodass es unmöglich war, weiter nach unten zu scrollen.

Zuerst dachte ich, es gäbe ein Problem mit der Beurteilungslogik, aber ich konnte nie eine Lösung finden. Später vermutete ich, dass es an der Zeitdifferenz zwischen Zustandswertänderungen lag. Es schien, als ob ich feststeckte eine Endlosschleife, und dann habe ich die Scrollentfernung beurteilt. Zuvor wurde eine Funktion hinzugefügt, um den Status von navTop zu bestimmen.

Der geänderte Hauptcode lautet wie folgt:

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

Nach dieser Änderung ist der Deckeneffekt normal.

Das obige ist der detaillierte Inhalt vonProbleme bei der Implementierung der Tab-Obergrenze mithilfe von React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!