Как использовать window.addEventListener в React JS

Question

Я пытаюсь понять, как реализовать window.addEventListener в React. Я разрабатываю веб-сайт с помощью Gatsby, и в среде «разработки» он работает, но всякий раз, когда я начинаю производство, он получает ошибку. Это мой код:

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

Я хочу применить класс при прокрутке. Я проверил, что не могу использовать "окно". в React. Как можно реализовать этот код в React?

Answer 1

Вызов функции на did mount компонента root может решить вашу проблему. например:

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

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

  return (
    <Home />
  );
}

Надеюсь, это поможет

Answer 2

Во время разработки компоненты реакции запускаются только в браузере, где определено window. Когда строит , Гэтсби отображает эти компоненты на сервере, где window не определено.

Обычно с React решением является доступ только к window в componentDidMount или проверка этого окна. существует до доступа к нему.

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

Answer 3

Вы можете напрямую добавлять события окна с помощью Gatsby, поскольку он выполняет рендеринг на стороне сервера. Для этого вам нужно добавить слушателей в метод gatsby-browser.js внутри onClientEntry, который вызывается при загрузке клиента

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