Creazione di un indicatore di posizione di scorrimento in React

Question

Sto provando a codificare una barra di avanzamento dell'indicatore di scorrimento in React. Ho lavorato con Jquery ma vorrei sapere come farlo con Javascript puro.

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

    handleScroll() { 
    var winHeight = $(window).height(), 
     docHeight = $(document).height(), 
     value = $(window).scrollTop(), 
     max, percent; 

    max = docHeight - winHeight; 
    percent = (value/max) * 100; 
    this.props.updatePercent(percent); 
    } 

Inoltre, dovrei preoccuparsi di fare questo in puro JavaScript? Mi è stato detto che Jquery non dovrebbe essere usato in React.

Answer 1

È l'unico posto in cui hai utilizzato JQuery? Se è così, ti consiglierei di abbandonarlo per puro javascript. Tutto ciò che puoi fare con JQuery puoi anche farlo con React e puro JavaScript, e non vale la pena di essere sovraccaricato qui.

Ecco una versione JavaScript della tua funzione handleScroll. Si noti che l'altezza del documento è notoriamente fastidiosa da calcolare, ma ho preso l'approccio di this question (che riproduce l'implementazione di JQuery).

handleScroll() { 
    var winHeight = window.innerHeight; 

    // Annoying to compute doc height due to browser inconsistency 
    var body = document.body; 
    var html = document.documentElement; 
    var docHeight = Math.max(body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight); 

    var value = document.body.scrollTop; 
    ... 
} 

Aggiornamento

Se si desidera ottenere la posizione di scorrimento all'interno di un elemento, avrete bisogno di qualcosa di simile a

var el = document.getElementById('story_body'); 
var minPixel = el.offsetTop; 
var maxPixel = minPixel + el.scrollHeight; 
var value = document.body.scrollTop; 

// respect bounds of element 
var percent = (value - minPixel)/(maxPixel - minPixel); 
percent = Math.min(1,Math.max(percent, 0))*100; 

Answer 2

Per rispondere alla tua seconda domanda: In questo caso particolare, si può semplicemente attenersi a jQuery (anche se preferisco la versione javascript di vanilla).

Con reagire, è perfettamente OK per utilizzare jQuery per:

• leggere informazioni dal reale DOM, che sono sconosciuti a reagire (come l'altezza del componente nel DOM, o la posizione scorrere nel tuo caso)
• roba ajax

Con reagire, non si dovrebbe utilizzare jQuery per:

• Manipolazione il DOM direttamente: manipola solo il DOM attraverso la reazione. (manipolare DOM con jQuery in risposta è una garanzia per grossi problemi)
• Lettura di informazioni DOM che possono e dovrebbero essere note per reagire, come il valore di un campo di input. (le cose non si rompono veramente, ma rende il tuo codice di reazione più difficile da eseguire se si usa jQuery per eludere le rigide linee guida di progettazione)