node.js - 如何在 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 将不包含该组件，然后它会以某种方式“切换”到客户端的 JS 代码，并且该组件会加载。但这不会发生。一般来说，我是服务器端渲染的新手，所以我有点迷路了。

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

Answer 1

做一个简单的窗口检查。

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

Answer 2

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

https://github.com/everdimension/Pikaday

我认为除了编辑插件本身之外别无他法。