如何在ReactJS中使用Django模板

发布时间：2020-12-20 13:10:40 所属栏目：Python 来源：网络整理

导读：我正在使用broswerify翻译我的jsx代码.但是,如何在将代码转换为 javascript后插入Django模板变量以对其进行反应？例如：在我的Django views.py中： def index(request): return render(request,'index.html',{"hello":"hello"}) 在component.jsx中 var Reac

我正在使用broswerify翻译我的jsx代码.但是,如何在将代码转换为 javascript后插入Django模板变量以对其进行反应？例如：

在我的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代码,因此未定义.

解决方法

你应该将”ReactDOM.render”移动到一个seaparate”index.jsx”文件或者你的反应应用程序的入口点.应将“{{hello}}”变量放在窗口对象上,以便反应组件可以访问它

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!