如何在ReactJS中使用Django模板_Django_Reactjs

如何在ReactJS中使用Django模板

django reactjs

如何在ReactJS中使用Django模板,django,reactjs,Django,Reactjs,我正在使用broswerify来翻译我的jsx代码。但在将Django模板变量转换为javascript后，如何插入该变量以对代码作出反应呢？例如：在my Django views.py中： def index(request): return render(request, 'index.html', {"hello":"hello"}) 在component.jsx中 var React = require('react') var ReactDOM = require('rea

我正在使用broswerify来翻译我的jsx代码。但在将Django模板变量转换为javascript后，如何插入该变量以对代码作出反应呢？例如：

在my 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>
        );
    },
});

问题是，在index.html中，浏览器抱怨

未定义，因为browserify已将jsx转换为原始javascript代码。

您应该将“ReactDOM.render”对象移动到seapate“index.jsx”文件或react应用程序的任何入口点。“{{hello}}”变量应该放在窗口对象上，以便react组件可以访问它

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