React JS Server端问题-找不到窗口

Question

[嗨，我正在我的reactJS项目中尝试使用react-rte。我有服务器端渲染，每当我想使用此包时，都会得到：

return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                               ^
ReferenceError: window is not defined

我想问题可能出在同构工具上，但我不知道如何将导入包延迟到已经定义了窗口的客户端。

Answer 1

如果您正在执行服务器端渲染，则很有可能全局窗口对象将是未定义的，因为这只有客户端会理解。

注：最初，当您启动项目时，它将渲染出DOM的完整字符串（此时，由于它是服务器端，因此将不知道window，但会重新渲染）以及您的窗口对象将可用的客户端代码！

在这种情况下，我正在使用一种解决方法。这就是我的webpack插件的内容：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': isDevelopment ? '"development"' : '"production"',
  'process.env.BROWSER': JSON.stringify(true),
  __DEV__: isDevelopment
}),

所以我使用process.env.BROWSER是我的优势，因为如果它是服务器端，它将被定义为undefined，如果客户端已完成渲染，它将被定义为true。
由于在服务器端没有窗口对象时，一切都会停止工作，因此我们可以添加以下内容：
const mySpecialWindowFunction = () => {

  /* START HACK */
  if (!process.env.BROWSER) {
    global.window = {}; // Temporarily define window for server-side
  }
  /* END HACK */

  return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
};

这样，您的控制台将不会对您尖叫，也不会停止服务器端渲染，现在您可以继续光荣的一天！尽管我不得不承认这有点
Hacky

，但是它可以完成工作，因为我们要做的只是让服务器端渲染出初始DOM字符串，然后让客户端接管。 >

还请注意：

不必担心将窗口设置为空对象，一旦客户端完成渲染，它将恢复正常。

Answer 2

这里是一个npm库，可以为您处理窗口，文档和全局对象：Global。

Answer 3

[当进行服务器端渲染时，像window，document这样的全局变量将是未定义的。而且，如果要以同构方式进行操作，则必须测试渲染组件时的环境。

Answer 4

我尝试将其设置为全局导入的常量中：

Answer 5

我发现的另一种解决方案是，您可以在'componentDidMount'事件中为状态变量分配'窗口变量'，在'render'方法中可以测试所需的状态变量是否为null或undefined然后返回null，直到'componentDidMount'完成为止。