如何在 React JS 中添加 window.addEventListener答案

【问题标题】：How to window.addEventListener in React JS如何在 React JS 中添加 window.addEventListener
【发布时间】：2020-05-09 10:30:36
【问题描述】：

我想弄清楚如何在 React 中实现 window.addEventListener。我正在用 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.. 当 DOM 重新渲染时，你应用的类可能会突然消失。您应该修改eventlistener 中的状态并根据渲染器中的状态变量设置类。
参考：stackoverflow.com/questions/38980371/…
usehooks.com/useOnScreen - 创建一个 Intersection 观察者 React Hook :)

标签： javascript reactjs gatsby

【解决方案1】：

在开发期间，React 组件仅在定义了window 的浏览器中运行。构建时，Gatsby 会在未定义 window 的服务器上渲染这些组件。

一般使用 React，解决方案是只访问 componentDidMount 中的window 或者在访问之前检查该窗口是否存在。

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

【讨论】：

只是缺少 if 语句，谢谢！有用！真的很感激！
reactjs 中使用 querySelector 的方法是否正确？ @ksav

【解决方案2】：

您可以直接使用 Gatsby 添加窗口事件，因为它执行服务器端渲染。为此，您需要在加载客户端时调用的 onClientEntry 方法中的 gatsby-browser.js 添加监听器

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

【讨论】：

嗨，Shubham，我从 Gatsby 开始，我会检查 gastby-browser 方法！有什么资源可以学习吗？感谢您的宝贵时间！
gatsbyjs.org/docs/browser-apis/#onClientEntry。这是正确的方法，而不是添加 if 条件
好的，我必须改变我的网站结构主题。以前永远不要使用 gatby-browser！谢谢:)

【解决方案3】：

在根组件的did mount 上调用函数可能会解决您的问题。例如：

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

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

  return (
    <Home />
  );
}

希望对你有帮助

【讨论】：

感谢毗湿奴的回复。我也会检查这个方法，谢谢你的时间;）