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

Question

React.useState(window.innerWidth) 由于服务器端呈现而失败，因为服务器端没有 window 对象。 我该如何解决？ 我一直在尝试这个 link 中的代码 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。