reactjs - 如何在 Gatsby 中捕获 document.ready 或 window.load 事件

Question

我对 Gatbsy 框架相对较新，我正在尝试找出一种方法来切换类在 DOMContentLoaded 或在 window.load 上，一旦用户可以看到屏幕就为它们设置动画。

这是我到目前为止所做的，但似乎不太合适:

componentDidMount = () => {
  if (typeof window === "undefined") return
  window.addEventListener("load", this.myEventHandler)
  // or
  if (typeof document === "undefined") return
  document.addEventListener("DOMContentLoaded", this.myEventHandler)
}

有更好的方法吗？

提前谢谢您。

Answer 1

我认为您应该在 gatsby-browser.js 中添加这些事件监听器:

// gatsby-browser.js
// ES6
export const onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

// or commonjs
exports.onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

您不必在那里检查window，因为该文件仅在客户端运行。这是full list of available hooks .

而且据我所知 document 没有 ready 事件，它是 jQuery 的事情。您可能对DOMContentLoaded event感兴趣，尽管它和 jQuery 的现成 IIRC 之间有一些细微的差别。