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

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 不会包含此组件，然后它会以某种方式 "switch" 到客户端的 JS 代码，组件将加载。但这不会发生。一般来说，我是服务器端渲染的新手，所以我有点迷路了。

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

Answer 1

对 window 进行简单检查。

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

Answer 2

我最终使用了 Pikaday 的这个分支，它引入了几个小的变化来检查 window 可用性：

https://github.com/everdimension/Pikaday

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