J'essaie de comprendre comment implémenter window.addEventListener dans React. Je développe un site Web avec Gatsby et dans un environnement de "développement" cela fonctionne mais chaque fois que je commence la production, il y a une erreur. Voici mon code:

const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};

// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);

Je veux appliquer une classe lorsque Scroll. J'ai vérifié que je ne peux pas utiliser "window". dans React. Comment implémenter ce code dans React?

0
JFelix 9 mai 2020 à 13:30

3 réponses

Meilleure réponse

Pendant le développement , les composants de réaction ne sont exécutés que dans le navigateur où window est défini. Lors de la construction , Gatsby restitue ces composants sur le serveur où window n'est pas défini.

Généralement avec React, la solution est d'accéder uniquement à window dans componentDidMount ou de vérifier que la fenêtre existe avant d'y accéder.

const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};

// Check that window exists before accessing it
if (typeof window !== 'undefined') {
    // Run the checkHeader function every time you scroll
    window.addEventListener('scroll', checkHeader);
}
1
ksav 9 mai 2020 à 11:08

L'appel de la fonction sur did mount du composant racine peut résoudre votre problème. par exemple:

// your entry component
const App = () => {

  React.useEffect(() => { // Will be called after mounting the componnent.
    onClientEntry();
  }, []);

  return (
    <Home />
  );
}

J'espère que cela t'aides

0
Vishnu 9 mai 2020 à 10:44

Vous pouvez directement ajouter des événements de fenêtre avec Gatsby car il effectue un rendu côté serveur. Pour ce faire, vous devez ajouter vos écouteurs dans gatsby-browser.js à l'intérieur de {{X1 }} méthode qui est appelée lorsque le client est chargé

// gatsby-browser.js
// ES6


const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};


export const onClientEntry = () => {
   // Run the checkHeader function every time you scroll
   window.addEventListener('scroll', checkHeader);
}
0
Shubham Khatri 9 mai 2020 à 10:58