钩子"/>
在gatsby构建中不使用文件,必须转换为钩子
我有一个在gatsby开发服务器中运行良好的脚本,但是当尝试运行gatsby构建时,出现错误提示
"document" is not available during server side rendering.
错误在此代码段上触发
const useActiveElement = () => {
const [active, setActive] = useState(document.activeElement)
我假设在此文件中我使用文档的任何位置,也可能在我使用文档的useEffect位置之外,也会出现此错误。我如何无法以允许Gatsby构建的方式正确地将代码转换为使用react挂钩。关于我应该做什么的建议?
完整文件(减去进口)
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
回答如下:在初始渲染点,尚未定义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
}
将useState
初始化为空,然后填写componentDidMount
(useEffect
为空deps
)。
更多推荐
在gatsby构建中不使用文件,必须转换为钩子
发布评论