Question

此类组件的一个示例是Pikaday（react-pikaday），其代码行中包含该行

hasEventListeners = !!window.addEventListener

但是window尚未在服务器上定义，因此当我运行代码时，它将引发错误ReferenceError: window is not defined。

我试图通过有条件地导入Pikady组件来解决此问题，如下所示：

let Pikaday;
if (typeof window !== 'undefined' && window.document && window.document.createElement) {
    import('./Pikaday').then(P => {
        Pikaday = P.default;
    });
}

在这种情况下，它不会引发错误，因为未加载该组件，但是我认为从服务器发送的初始HTML将不包含该组件，然后它将以某种方式“切换”到客户端的JS代码，该组件将加载。但这不会发生。一般来说，我是服务器端渲染的新手，所以我迷路了。

我该如何解决？我对Leaflet库也有同样的问题，它的代码中还包含window。

Answer 1

对窗口进行简单检查。

if (typeof window !== 'undefined') {
    // write your logic here
}

Answer 2

我最终使用了Pikaday的这个分支，引入了一些小的更改来检查window的可用性：

https://github.com/everdimension/Pikaday

除了编辑插件本身，我认为没有其他方法。

在服务器端渲染中如何使用在React中使用`window`引用的组件？

2 个答案: