Question

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

未捕获的ReferenceError：窗口未定义

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

的事实

Answer 1

Sawtaytoes得到了它。我会在componentDidMount（）中运行你拥有的任何代码并用：

包围它

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

如果React渲染组件时仍然没有创建窗口对象，那么在组件渲染之后总是可以运行代码一小段时间（并且窗口对象肯定是在那时创建的）所以用户无法区分。

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

我建议不要在setTimeout中放置状态。

Answer 2

这将为您解决这个问题：

typeof(window) === 'undefined'

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

Answer 3

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

但是，如果必须在代码中真正运行客户端和服务器的部分引用窗口，请改用window（代表全局范围 - 例如客户端上的INSERT INTO TableB (Col1, Col2) SELECT UserId, Item, Max([Date]) FROM TableA GROUP BY UserId, Item）

Answer 4

这有点旧了但是对于ES6样式的反应组件类，你可以使用我创建的这个类装饰器作为解决方案，用于定义应该只在客户端呈现的组件。我喜欢它比在任何地方放弃窗户检查更好。

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 5

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

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

Answer 6

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

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

6 个答案: