Définir un style de composant après l'événement onScroll

1. Événement React onScroll pour les composants de classe
2. Événement React onScroll pour les composants fonctionnels

Lors du développement d’applications React, il est souvent nécessaire d’écouter les commentaires des utilisateurs et de mettre à jour l’état en conséquence. Par exemple, vous souhaiterez peut-être mettre en évidence les composants actuellement dans la vue de l’utilisateur.

Pour mettre à jour sous condition les styles d’un composant, il est recommandé d’utiliser les solutions CSS-in-JS, comme les composants en ligne ou la bibliothèque styled-components.

Avant d’aller plus loin, vous devez configurer un écouteur d’événement pour l’événement scroll:window.addEventListener('scroll'). Ensuite, vous pouvez définir une fonction de gestionnaire pour l’événement de défilement.

Événement React onScroll pour les composants de classe

Malgré une conception légèrement différente, les composants de la classe React sont assez similaires aux composants fonctionnels. Une grande différence entre les deux est que les composants de classe n’ont pas de crochets. Au lieu de cela, nous pouvons utiliser l’une des méthodes de cycle de vie.

composantDidMount()

Pour simplifier les choses, utilisons une méthode de cycle de vie avec le comportement le plus prévisible. Après avoir configuré un écouteur pour un événement scroll, nous devons passer un gestionnaire en tant que deuxième argument à la méthode window.addEventListener(). Ensuite, dans la méthode du cycle de vie, nous devons appeler le gestionnaire. Regardons cet exemple de playcode.io :

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      fontSize: 16
    }
    this.handleScroll = this.handleScroll.bind(this)
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };
  handleScroll(event)  {
    this.setState({fontSize: window.pageYOffset})
  }
  render() {
    return <div style={{height: "150vh", width: "80vw", fontSize: this.state.fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;
  }
}

Chaque fois que l’élément <div> est fait défiler, notre composant sera restitué en raison des changements d’état. Le gestionnaire met à jour l’état en fonction de la propriété pageYOffset de l’objet fenêtre. Cette valeur de window.pageYOffset montre à quel point nous avons fait défiler vers le bas.

Rendez-vous sur playcode.io et essayez-le par vous-même. Plus vous faites défiler vers le bas, plus la police sera grande.

Événement React onScroll pour les composants fonctionnels

Pour déclencher les modifications en fonction de l’événement de défilement, vous devez d’abord configurer un écouteur pour cet événement. Cela peut être fait en appelant la méthode window.addEventListener('scroll'). Notez que vous devez transmettre une chaîne qui spécifie le type d’événement que vous écoutez dans l’appel. Dans ce cas, on passe 'scroll'. Le deuxième argument doit être une référence au gestionnaire d’événements.

useEffect()

Vous pouvez considérer useEffect() comme une combinaison des hooks de cycle de vie de tous les composants de classe. Dans ce cas, pour reproduire le comportement du hook componentDidMount(), nous allons passer un tableau vide en second argument. Exemple:

const [fontSize, setFontSize] = useState(0);
const handleScroll = () => setFontSize(window.pageYOffset)
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
  }, []);

La valeur de la variable fontSize changera dynamiquement. Vous pouvez le référencer dans vos styles en ligne pour modifier le style de l’élément.

<div style={{height: "150vh", width: "80vw", fontSize: fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;

Notez que nous passons une simple référence à la variable d’état dans les composants fonctionnels, pas à l’objet this.state.