Node.js 中的错误“未定义窗口”答案

【问题标题】：Error `window not defined` in Node.jsNode.js 中的错误“未定义窗口”
【发布时间】：2016-05-24 06:58:39
【问题描述】：

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

未捕获的引用错误：未定义窗口

如何解决我不能做window && window.scroll(0, 0) 的事实？

【问题讨论】：

标签： node.js reactjs webpack webpack-dev-server

【解决方案1】：

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

【讨论】：

欢迎来到 SO。请在您的答案中添加一些上下文。什么生命周期挂钩，为什么？

【解决方案2】：

这有点旧，但是对于 ES6 样式的 react 组件类，您可以使用我创建的这个类装饰器作为定义仅应在客户端呈现的组件的解决方案。我更喜欢它而不是随处放置窗口检查。

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

【讨论】：

【解决方案3】：

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

如果您需要在 React JS 应用程序顶部打开新页面，请在 router.js 中使用此代码

【讨论】：

仅仅删除一段代码很少有帮助。请添加说明。
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案4】：

这将为您解决这个问题：

typeof(window) === 'undefined'

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

【讨论】：

【解决方案5】：

Sawtaytoes 得到了它。我会运行你在 componentDidMount() 中的任何代码并用：

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

如果在 React 渲染组件时窗口对象仍未创建，您始终可以在组件渲染后的几分之一秒内运行您的代码（并且到那时窗口对象肯定已经创建），以便用户无法区分。

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

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

【讨论】：

感谢您的提示！将window. 放在componentDidMount 中解决了这个问题:)

【解决方案6】：

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

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

【讨论】：

在一种情况下，我需要做new Audio()，我需要检查window 和window.Audio 是否存在。可悲的是，如果我在 componentDidMount() 中执行此操作，即使我执行此操作onClick，它也会在我放入的子模块的道具中显示为未定义。