用 django 响应客户端渲染答案

【问题标题】：react client side rendering with django用 django 响应客户端渲染
【发布时间】：2017-07-13 12:29:57
【问题描述】：

我正在将 reactjs 与我的 django 集成，我已经完成了设置，甚至可以从服务器渲染页面，但是在客户端渲染和事件处理和附加时，我收到错误“未捕获的 ReferenceError：MainContainer 是没有定义的”。我完全迷路了，请帮助我。

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

【问题讨论】：

MainContainer 大概是一个 React 组件。组件是否在index_webpack.js 中声明或导入？如果是这样，该文件是否被正确加载？如果没有，您需要以某种方式将组件导入到窗口中。
我签入了我的 index_webpack.js，组件已导入那里，但不知何故，我知道为什么我会出错！但如果它不适合我，你能告诉我如何在窗口中导入吗？
通常我会在 webpack 包中包含整个 javascript（包括你的 ReactDOM.render 行）。这样你就知道这一切都在一个地方。 index_webpack.js 加载成功了吗？
@ChidG，我得到了这个，我创建了另一个 app.jsx 文件，并用 window 对象附加了我的所有组件，并在 webpack.config.js 的入口点中提到了这个文件，你猜怎么着！它对我来说非常有用。

标签： django reactjs server-side-rendering react-server

【解决方案1】：

您最好使用django-webpack-loader 来帮助您将 webpack 包集成到 django 模板中。对我们来说，将 webpack 与 django 一起设置需要付出很多努力。现在我们根本不需要考虑 webpack，它就在那里自动构建我们所有的应用程序，我们可以将包集成到我们的模板中

{% render_bundle 'react_app' %}

【讨论】：