使用ReactJS和Flask管理同構應用程序中的'window'對象Python

我正在開發一個帶有ReactJS front的Flask後端的應用程序。 ReactJS應用程序已經開發並與webpack捆綁在一起。使用ReactJS和Flask管理同構應用程序中的'window'對象Python

一切工作正常與客戶端呈現，這是與webpack捆綁在一起。

我現在試圖用python-react添加服務器端渲染。

但問題是，我要通過Jinja2 template其中有reactjs根組件節點<div id='react-node'></div>基本模板index.html分享一些變量來我ReactJS應用程序。

我不得不通過jinja2模板，我routes和config發送到我的應用程序如下圖所示，

//index.html 

<!doctype html> 
<html> 
... 
... 

<script type='text/javascript'> 
    var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}"; 
    var ROUTES = { ... }; 
... 
</script> 

</html>

上述所有的JS變量被設置爲全球window對象。

但是當我試圖在python中渲染組件時，它會拋出異常對於window對象ReactRenderingError: react: ReferenceError: window is not defined。

解決此問題的最佳方法是什麼？

來源

2015-06-24 Ibrahim

嗨！你使用'React.renderToString'（或'React.renderToStaticMarkup'）服務器端？ – Jean

在服務器上呈現時沒有窗口全局。您可以創建一個假的窗口中，首先檢查是否存在窗口：

if (typeof(window) == 'undefined'){ 
    global.window = new Object(); 
}

或者，你可以使用jsdom，或類似的庫來創建一個假的DOM。

來源

2015-06-24 19:45:32 Mark

大聲笑哪個文件你嘲笑假窗口？ –

越接近應用程序的初始化越好，在節點上，當您在全局上定義某些內容時，它可用於所有文件。如果您的'npm start'正在運行一個名爲index.js的腳本，則嘗試在index.js或index.js所需的其中一個文件中定義它。 – TigerC10

只需添加以下的WebPack配置：

// By default, Webpack is set up to target the browser, 
    // not a Node environment. Try setting target in your config: 
    target: 'node',

來源

2016-03-01 14:39:41

使用ReactJS和Flask管理同構應用程序中的'window'對象Python

回答

相關問題