我有一个在 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
最佳答案
在初始渲染点,您的文档
尚未定义:
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
)。
关于javascript - 无法在 gatsby 构建中使用文档,必须转换为 Hook ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61747744/