反應客戶端渲染與Django

我正在整合reactjs與我的django，我已經完成設置，甚至能夠呈現從服務器頁面，但在客戶端，當涉及到渲染和事件處理和附加，我得到錯誤「未捕獲的ReferenceError：MainContainer未定義」。我完全迷失在這裏，請幫助我。反應客戶端渲染與Django

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="static/src/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="static/src/css/style.less"/> 
    </head> 

    <body> 
     <script> 
        // var INITIAL_DATA = JSON.parse('{{ serialized_value|safe }}') 
        var INITIAL_DATA = {{ serialized_value|safe }} 
     </script> 
     <div id="app">{{ rendered|safe }}</div> 
     <script type="text/javascript" src="static/build/index_webpack.js"></script> 
     <script> 
      // ReactDOM.render(React.createFactory(MainContainer)({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app')); 
      ReactDOM.render(MainContainer({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app')); 
     </script> 
    </body> 
</html>

來源

2017-02-23 Prashant

'MainContainer'大概是一個陣營的組成部分。組件在'index_webpack.js'中聲明或導入了嗎？如果是這樣，該文件是否正確加載？如果不是，您需要以某種方式將組件導入窗口。 – ChidG

我檢查了我的index_webpack.js，組件導入那裏，但不知何故，Idk爲什麼我得到錯誤！，但如果它不適合我，你能告訴我如何導入窗口？ – Prashant

通常，我會在webpack捆綁包中包含整個javascript（包括您的'ReactDOM.render'行）。這樣你就知道它在一個地方。 index_webpack.js是否成功加載？ – ChidG

你可能會使用django-webpack-loader，以幫助您的WebPack包集成到Django模板會更好。對於我們來說，將webpack與django一起放置需要花費很多心血。現在，我們沒有在所有想到的WebPack，它只是坐在那裏，並自動生成所有我們的應用程序，我們可以在包剛剛融入我們的模板與

{% render_bundle 'react_app' %}

來源

2017-03-18 09:22:30

反應客戶端渲染與Django

回答

相關問題