2017-02-23 121 views
0

我正在整合reactjs与我的django,我已经完成设置,甚至能够呈现从服务器页面,但在客户端,当涉及到渲染和事件处理和附加,我得到错误“未捕获的ReferenceError:MainContainer未定义”。 我完全迷失在这里,请帮助我。反应客户端渲染与Django

error in index.html

<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> 
+0

'MainContainer'大概是一个阵营的组成部分。组件在'index_webpack.js'中声明或导入了吗?如果是这样,该文件是否正确加载?如果不是,您需要以某种方式将组件导入窗口。 – ChidG

+0

我检查了我的index_webpack.js,组件导入那里,但不知何故,Idk为什么我得到错误!,但如果它不适合我,你能告诉我如何导入窗口? – Prashant

+0

通常,我会在webpack捆绑包中包含整个javascript(包括您的'ReactDOM.render'行)。这样你就知道它在一个地方。 index_webpack.js是否成功加载? – ChidG

回答

0

你可能会使用django-webpack-loader,以帮助您的WebPack包集成到Django模板会更好。对于我们来说,将webpack与django一起放置需要花费很多心血。现在,我们没有在所有想到的WebPack,它只是坐在那里,并自动生成所有我们的应用程序,我们可以在包刚刚融入我们的模板与

{% render_bundle 'react_app' %}