反應JS服務器端問題 - 窗口未找到

嗨我想在reactJS項目中使用react-rte。我有服務器端渲染，每次我想用這個包，我得到：反應JS服務器端問題 - 窗口未找到

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

    ReferenceError: window is not defined

我想這個問題可能與同構的工具，但我不知道如何導入包推遲到客戶端，其中窗口將會被定義。

來源

2016-08-15 Jan Omacka

在做服務器端渲染時，像window這樣的全局，document將是未定義的。如果你想以同構的方式來做，你必須測試渲染組件時的環境。

https://github.com/DavidWells/isomorphic-react-example

大量的實例代碼可以在github上發現，上面的鏈接就是其中之一，希望能有所幫助。

來源

2016-08-15 08:34:48 Littlee

如果你在做服務器端渲染，很可能全局窗口對象將被定義爲未定義的，因爲這只是客戶端會理解的東西。

注：最初，當你開始你的項目它要呈現出你的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字符串，然後讓客戶端接管。

另請注意：不要擔心設置窗口，一個空的對象，它會恢復正常，一旦客戶端呈現完畢。

來源

2016-10-09 04:04:30

我究竟會在哪裏添加「mySpecialWindowFunction」？ – Spacemoose

這是一個npm庫，它可以爲你處理窗口，文檔和全局對象：Global。

然後你就可以放心地寫：

import window from 'global' 

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

來源

2017-10-24 10:36:20 Natrezim

反應JS服務器端問題 - 窗口未找到

回答

相關問題