gpt4 book ai didi

django - 如何在ReactJS中使用Django模板

转载 作者:行者123 更新时间:2023-12-03 13:55:15 25 4
gpt4 key购买 nike

我正在使用 broswerify 来翻译我的 jsx 代码。但是,在将代码转换为 JavaScript 后,如何插入 Django 模板变量来 react 代码呢?例如:

在我的 Django View 中:

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

在组件.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.jsxbundle.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”内容移动到单独的“index.jsx”文件或您的 react 应用程序的入口点。 ''{{hello}}'' 变量应该放在 window 对象上,以便 react 组件可以访问它

关于django - 如何在ReactJS中使用Django模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35899103/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com