不能在gatsby构建中使用文档，必须转换为钩子。

Question

我有一个脚本，在gatsby开发服务器中工作正常，但当我试图运行gatsby构建时，我得到了一个错误的说明。

"document" is not available during server side rendering.

该错误在这段代码中发生。

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

我想，这个错误也会出现在我使用 document 在这个文件中，也许在 useEffect 用的地方 document. 然而，我一直无法正确地将代码转换为使用反应钩子的方式，以便让Gatsby构建。有什么建议可以告诉我应该怎么做吗？

完整的文件（减去导入

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

在初始渲染点，你的 document 还没有定义，所以。

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
}

Init the useState 空着，填上你的 componentDidMount (useEffect 空的 deps).