Corrigez le composant React suivant : Scroller

Question

Voici un composant censé afficher le nombre de pixels scrollés verticalement.

class Scroller extends React.Component {
  constructor(props) {
    super(props);
    this.state = { distance: window.scrollY };
    this.updateDistance = this.updateDistance.bind(this);
  }
  
  updateDistance() {
    this.setState({ distance: window.scrollY });
  }
  
  componentDidMount() {
    window.addEventListener("scroll", this.updateDistance);
  }

  render() {
    return (
      <div style="height: 5000px"> 
        <p style="position: fixed; top: 5px; left: 5px">
          Scrolled {this.state.distance} pixels.
        </p>
      </div>
    );
  }
}

Quel(s) est(sont) le(s) problème(s) ?

Scrolled {this.state.distance} pixels.

); } } ``` Quel(s) est(sont) le(s) problème(s) ?

Accepted Answer

Les styles sont déclarés comme des chaînes de caractères.

Accepted Answer

Appeler `this.updateDistance` à chaque évènement `scroll` peut avoir des impacts sur la performance.

Accepted Answer

Le composant fuitera un écouteur d'évènement lorsqu'il sera retiré du DOM.

Answer

Aucun.

Question du test React (legacy)

Corrigez le composant React suivant : Scroller