组件的条件渲染基于window.innerWidth
似乎没有按预期工作生产建立基于盖茨比的网站。
我用来检查视口宽度的钩子,以及对窗口全局的额外检查以避免 Gatsby-node 生产构建错误,如下所示:
import { useState, useEffect } from 'react'
const useWindowWidth = () => {
const windowGlobal = typeof window !== 'undefined'
if(windowGlobal) {
const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth)
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
})
return width
}
}
export default useWindowWidth
然后在我的实际组件中我执行以下操作:
IndexPage.Booking = () => {
const windowWidth = useWindowWidth()
return (
<div className="section__booking__wrapper">
{ windowWidth <= mediaQueries.lg && <IndexPage.Cta /> }
<div className="section__booking-bg" style={{ backgroundImage: `url(${bg})` }}>
{ windowWidth > mediaQueries.lg && <IndexPage.Cta /> }
</div>
</div>
)
}
它按应有的方式工作development
但是生产构建无法呈现:
<div className="section__booking-bg" style={{ backgroundImage: `url(${bg})` }}>
当调整 mediaQueries.lg (1024) 下面的窗口大小时,它会触发实际的正常行为或有条件地渲染组件的移动和桌面版本。
仔细检查是否是因为渲染仅在resize
事件(它不会,因为它在加载时起作用development
环境)我也干脆,从内钩console.log()
返回值并被打印出来,在生产正确加载。
中也没有错误或警告生产 or development
建造任何东西。
根据@Phillip的建议进行编辑
const useWindowWidth = () => {
const isBrowser = typeof window !== 'undefined'
const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0)
useEffect(() => {
if (!isBrowser) return false
const handleResize = () => setWidth(window.innerWidth)
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
})
return width
}
现在,只要您在 mediaQueries.lg 阈值下调整大小一次,它就可以工作,然后它可以在桌面和移动设备上完美工作,但不能在加载时工作。