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

Question

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

Answer 1

您应该处理代码在服务器端运行的情况，并进行条件检查以查看是否存在window。您的用例可能的实现方式可能是：React.useState(typeof window !== 'undefined'? window.innerWidth: 800)

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

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