Reactjs 盖茨比&x2B；因为并没有窗户，所以在建筑上会出现裂缝

我在盖茨比网站的某些页面上设置了一个react钩子来处理砖石问题。问题是它引用的窗口对象在服务器端不存在

gatsby build

：

然而，我似乎无法包装砖石文件的正确部分。我还了解到，使用上述方法会使服务器端渲染变得毫无意义

有人能告诉我，如果陈述应该在我下面的砖石文件去哪里吗？它不是一个插件，而是我的utils文件夹中的一个钩子。我在useffects中尝试了if语句，围绕useffects，围绕整个eventListener，但是没有骰子。谢谢

import React, { useEffect, useRef, useState } from "react"
import styled from "styled-components"

const useEventListener = (eventName, handler, element = window) => {
  const savedHandler = useRef()

  useEffect(() => {
    savedHandler.current = handler
  }, [handler])

  useEffect(() => {
    const isSupported = element && element.addEventListener
    if (!isSupported) return

    const eventListener = event => savedHandler.current(event)
    element.addEventListener(eventName, eventListener)

    return () => {
      element.removeEventListener(eventName, eventListener)
    }
  }, [eventName, element])
}

const fillCols = (children, cols) => {
  children.forEach((child, i) => cols[i % cols.length].push(child))
}

export default function Masonry({ children, gap, minWidth = 500, ...rest }) {
  const ref = useRef()
  const [numCols, setNumCols] = useState(3)
  const cols = [...Array(numCols)].map(() => [])
  fillCols(children, cols)

  const resizeHandler = () =>
    setNumCols(Math.ceil(ref.current.offsetWidth / minWidth))
  useEffect(resizeHandler, [])
  useEventListener(`resize`, resizeHandler)

  const MasonryDiv = styled.div`
    margin: 1rem auto;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
  `
  const Col = styled.div`
    display: grid;
    grid-gap: 1rem;
  `

  return (
    <MasonryDiv ref={ref} gap={gap} {...rest}>
      {[...Array(numCols)].map((_, index) => (
        <Col key={index} gap={gap}>
          {cols[index]}
        </Col>
      ))}
    </MasonryDiv>
  )
}

import React，{useffect，useRef，useState}来自“React”
从“样式化组件”导入样式化
const useEventListener=（事件名称、处理程序、元素=窗口）=>{
const savedHandler=useRef（）
useffect（（）=>{
savedHandler.current=处理程序
}，[handler]）
useffect（（）=>{
const issuported=element&&element.addEventListener
如果（！isSupported）返回
const eventListener=event=>savedHandler.current（事件）
元素。addEventListener（eventName，eventListener）
return（）=>{
元素。removeEventListener（eventName，eventListener）
}
}，[eventName，element]）
}
const fillCols=（子对象，cols）=>{
children.forEach（（child，i）=>cols[i%cols.length].push（child））
}
导出默认函数砌体（{children，gap，minWidth=500，…rest}）{
const ref=useRef（）
常量[numCols，setNumCols]=useState（3）
常量cols=[…数组（numCols）].map（（）=>[]）
菲尔科尔斯（儿童，科尔斯）
常量resizeHandler=（）=>
setNumCols（数学单元（参考当前偏移宽度/最小宽度））
useEffect（resizeHandler，[]））
useEventListener（`resize`，resizeHandler）
const MasonryDiv=styled.div`
保证金：1rem自动；
显示：网格；
网格自动流：列；
网格间距：1rem；
`
const Col=styled.div`
显示：网格；
网格间距：1rem；
`
返回(
{[…数组（numCols）].map（（{，索引）=>(
{cols[index]}
))}
)
}

在您的

gatsby node.js

中添加以下代码片段：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /masonry/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

注意：从您的

节点\u模块中使用
/massy/
库路径

来自盖茨比文件，关于：

构建静态HTML文件时出错通常发生在以下情况之一：
原因如下:

您的一些代码引用了“浏览器全局”，如窗口或
文件。如果这是您的问题，您应该看到上面的错误，如
“
窗口
未定义”。若要修复此问题，请查找有问题的代码并
a）在调用代码之前检查窗口是否定义为
代码在盖茨比构建时不运行（请参见下面的代码示例）或
b） 如果代码位于React.js组件的render函数中，请移动
将代码装入
组件didmount
生命周期或
useffect
挂钩，
这确保了除非代码在浏览器中，否则代码不会运行

或者，您可以将您的导入和您的砌体挂钩用法包装在以下语句中：

if (typeof window !== `undefined`) {
  const module = require("module")
}

注意
==比较，而不是像您提供的那样的
=
。
您可能希望使用类似于或的东西，而不是尝试在React中重新实现砖石结构。我想要一种特定类型的砖石结构，列在列中，但div按时间顺序从左到右读取，否则将完全使用它。啊，有趣！圬工钩子不是一个节点库，它是我的utils/文件夹中的一个js文件，当我填充test:with utils/massy.js时，它不工作吗？这是我正在使用的砖石系统。请尝试在我添加的比较（
typeof window！='undefined'
）中包装您的砖石挂钩用法。@FerranBuireu，您能回顾一下并回答我的问题吗？
if (typeof window !== `undefined`) {
  const module = require("module")
}