NextJS React应用程序中未定义窗口？

作者: ⑩Ⅵ嵗Ｄ夨憶
发布时间: 2024-08-06 01:27:59 (1月前)
转自：

3 条回复

0#
回复此人
荀彧. | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 从中移动代码 <code> componentWillMount() </code> 至 <code> componentDidMount() </code> ： </p> <pre> <code> componentDidMount() { console.log('window.innerHeight', window.innerHeight); } </code> </pre> <P> 在NextJS中， <code> componentDidMount() </code> 只执行客户端在哪里 <code> window </code> 和其他浏览器特定的API将可用。来自NextJS <a href="https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined" rel="nofollow noreferrer"> 维基 </A> ： </p> <BLOCKQUOTE> <P> Next.js是通用的，这意味着它首先在服务器端执行代码，客户端。窗口对象仅存在于客户端，因此如果你绝对需要在一些React组件中访问它应该将该代码放在componentDidMount中。这个生命周期方法会只能在客户端上执行。您可能还想检查是否存在不是一些可能适合您需求的替代通用库。 </p> </BLOCKQUOTE> <P> 沿着同样的路线， <code> componentWillMount() </code> 将会 <a href="https://reactjs.org/docs/react-component.html#unsafe_componentwillmount" rel="nofollow noreferrer"> 弃用 </A> 在React的第17版中，因此在不久的将来有效地使用它可能是不安全的。 </p> </DIV>

编辑
1#
回复此人
诸葛神侯 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> componentWillMount() </code> 生命周期钩子在服务器和客户端都可以工作。在您的情况下，服务器在页面服务期间不会知道“窗口”或“文档”，建议将代码移动到其中 </p> <P> 的<strong> 解决方案1： </强> </p> <pre> <code> componentDidMount()</code>. </code> </pre> <P> 的<strong> 或者，解决方案2 </强> </p> <P> 如果它只是你想要执行的东西，那么你可以写下这样的东西： </p> <pre> <code> componentWillMount() { if (typeof window !== 'undefined') { console.log('window.innerHeight', window.innerHeight); } } </code> </pre> </DIV>

编辑

登录后才能参与评论