javascript - 无法在 gatsby 构建中使用文档，必须转换为 Hook

Question

我有一个在 gatsby 开发服务器中运行良好的脚本，但是当我尝试运行 gatsby build 时，我得到一个错误说明

"document" is not available during server side rendering.

此代码片段引发错误

const useActiveElement = () => {
  const [active, setActive] = useState(document.activeElement)

我假设这个错误也存在于我在这个文件中使用 document 的任何地方，也许在我使用 document 的 useEffect 地方之外.但是，我无法以允许 Gatsby 构建的方式正确地将代码转换为使用 react 钩子(Hook)。关于我应该做什么的任何建议？

完整文件(减去导入)

const useActiveElement = () => {
  const [active, setActive] = useState(document.activeElement)

  const handleKeyup = (e) => {
    if (e.keyCode === 9) setActive(document.activeElement)
  }

  useEffect(() => {
    document.addEventListener("keyup", handleKeyup)
    return () => {
      document.removeEventListener("keyup", handleKeyup)
    }
  }, [])

  return active
}

const Layout = ({
                  children,
                  crumbLabel,
                  subStatus,
                  parentPageLabel,
                  parentPageLink,
                }) => {
  const focusedElement = useActiveElement()

  const data = useStaticQuery(graphql`
      query SiteTitleQuery {
          sanitySiteSettings {
              title
          }
      }
  `)

  useEffect(() => {
    const prevTabbedElements = document.getElementsByClassName("tabbed")
    for (let i = 0; i < prevTabbedElements.length; i++) {
      prevTabbedElements[i].classList.remove("tabbed")
    }
    focusedElement.value && focusedElement.value.classList.add("tabbed")
    focusedElement.classList.add("tabbed")
  }, [focusedElement])


  return (
    <>
      <Header siteTitle={data.sanitySiteSettings.title}/>
      <nav>
        {subStatus ? (
          <Parentcrumbs
            crumbLabel={crumbLabel}
            parentPageLabel={parentPageLabel}
            parentPageLink={parentPageLink}
          />
        ) : (
          <Breadcrumbs crumbLabel={crumbLabel}/>
        )}
      </nav>
      <main>{children}</main>

      <Footer/>
    </>
  )
}
Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Answer 1

在初始渲染点，您的文档 尚未定义:

const useActiveElement = () => {
  const [active, setActive] = useState('')

  const handleKeyup = (e) => {
    if (e.keyCode === 9) setActive(document.activeElement)
  }

  useEffect(() => {
    setActive(document.activeElement);

    document.addEventListener("keyup", handleKeyup)
    return () => {
      document.removeEventListener("keyup", handleKeyup)
    }
  }, [])

  return active
}

将 useState 初始化为空并填写您的 componentDidMount(useEffect 为空 deps)。