如何在服务器端渲染中使用 React.useState(window.innerWidth)



React.useState(window.innerWidth(由于服务器端渲染而失败,因为服务器端没有窗口对象。 我该如何解决它? 我一直在尝试此链接中的代码 https://blog.logrocket.com/developing-responsive-layouts-with-react-hooks/

当代码在服务器端运行时,您应该使用条件检查来查看window是否存在。您的用例的可能实现可能是:React.useState(typeof window !== 'undefined'? window.innerWidth: 800)

值得一提的是,除非客户端将其window.innerWidth与页面请求一起发送到服务器,否则服务器只能使用上述默认值(或者可能是从用户代理那里猜测(。因此,如果服务器端派生的布局与客户端派生的布局有很大不同,则客户端屏幕上可能会有轻微的闪烁。

这就是为什么在进行服务器端渲染时,我总是更喜欢使用 CSS 进行响应式布局而不是 JavaScript。

最新更新