如何在 ReactJS 中使用 Django 模板答案

【问题标题】：How to use Django template in ReactJS如何在 ReactJS 中使用 Django 模板
【发布时间】：2016-06-24 06:30:33
【问题描述】：

我正在使用 broswerify 来翻译我的 jsx 代码。但是，在将 Django 模板变量转换为 javascript 后，如何插入它来响应代码？例如：

在我的 Django views.py 中：

def index(request):
    return render(request, 'index.html', {"hello":"hello"})

在component.jsx中

var React = require('react')
var ReactDOM = require('react-dom');

var Component = React.createClass({
    render: function(){
        return (
            <div>{this.props.content}</div>
        );
    },
});

然后使用browserify -t [ babelify --presets [ react ] ] component.jsx -o bundle.js 将component.jsx 转换为bundle.js。

在 index.html 中：

<html>
...
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="container"></div>
    <script src="bundle.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <Component content={{hello}} />,
        document.getElementById('container')
      );
    </script>
</body>

<html>

问题在于，在 index.html 中，浏览器抱怨 <Component> 未定义，因为 browserify 已将 jsx 转换为原始 javascript 代码。

【问题讨论】：

npmjs.com/package/react-html-parser 可以帮忙

标签： django reactjs

【解决方案1】：

您应该将 ''ReactDOM.render'' 东西移动到一个单独的 ''index.jsx'' 文件或任何你的 react 应用程序的入口点。 ''{{hello}}'' 变量应该放在窗口对象上，以便反应组件可以访问它

【讨论】：