Node.js 中的错误“window 未定义”

Question

我知道 window 在 Node.js 中不存在，但我在客户端和服务器上使用 React 和相同的代码。我用来检查 window 是否存在的任何方法都会让我失望：

Uncaught ReferenceError: window is not defined

如何解决我无法做到的事实 window && window.scroll(0, 0)？

Answer 1

这将为您解决该问题：

typeof(window) === 'undefined'

即使未定义变量，您也可以使用 typeof() 来检查它。

Answer 2

这种代码甚至不应该在服务器上运行，它应该在一些 componentDidMount (see doc) 钩子里面，它只是调用客户端。这是因为滚动 window 服务器端没有意义。

但是，如果您必须在真正同时运行客户端和服务器的部分代码中引用 window，请改用 global（代表全局范围 - 例如 window 在客户端上）。

Answer 3

Sawtaytoes 知道了。我会运行你在 componentDidMount() 中的任何代码，并将它包围起来：

if (typeof(window) !== 'undefined') {
  // code here
}

如果在 React 渲染组件时 window 对象仍未创建，您总是可以运行在组件渲染后的几分之一秒内编写您的代码（并且 window 到那时肯定已经创建了对象）所以用户无法区分。

if (typeof(window) !== 'undefined') {
    var timer = setTimeout(function() {
        // code here
    }, 200);
}

我建议不要将状态放入 setTimeout。

Answer 4

<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>

如果您需要在 React JS 应用中在顶部打开新页面，请在 router.js

中使用此代码

Answer 5

这有点旧，但是对于 ES6 风格的 React 组件 classes 你可以使用我创建的这个 class 装饰器作为定义只应在客户端呈现的组件的嵌入式解决方案.我更喜欢它而不是在任何地方放弃 window 检查。

import { clientOnly } from 'client-component';

@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
    render() {
        const currentLocation = window.location;
        return (
            <div>{currentLocation}</div>
        )
    };
}

https://github.com/peterlazzarino/client-component

Answer 6

将 window 和相关代码移至 mounted() 生命周期挂钩。这是因为 mounted() 挂钩仅在客户端调用，并且 window 在那里可用。

Node.js 中的错误“window 未定义”

Error `window not defined` in Node.js

node.js

reactjs

webpack

webpack-dev-server