反应JS不渲染 [英] React JS not rendering
本文介绍了反应JS不渲染的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Project / static / our_static / js / jstest .js var HelloMessage = React.createClass({render:function(){return< h1> Hello {this.props.message}!< / h1> ;;}}); React.render(HelloMessage,message =World,document.body);
project / templates / master_pages / helloworld.html {%load staticfiles%}<!DOCTYPE HTML>< html> < HEAD> < meta charset =utf-8> < title> React Hello World< / title> < /头> <身体GT; < H1> < / H1> < script src =http://fb.me/react-0.12.2.min.js>< / script> < script src =http://fb.me/JSXTransformer-0.12.2.js>< / script> < script src ='{%staticjs / jstest.js%}'>< / script> < / body>< / html>
解决方案
经过大量的尝试和错误,我发现我的jsx只会在我的脚本路径中添加type =text / jsx时呈现。
I´ve built the backend of my project with Django using Pycharm as my IDE. I have now decided to proceed on the frontend using React js. I´ve started out with some simple tutorials but cannot get the code to render anything. The strange thing is, that if I complete the same tutorial in Atom io and open the html file, the code renders as expected. The same code written in Pycharm comes up as a blank page. I´ve tried opening in both chrome and firefox after I "runserver" but with no success.
Project/static/our_static/js/jstest.js
var HelloMessage = React.createClass({
render: function () {
return <h1>Hello {this.props.message}! </h1>;
}
});
React.render(HelloMessage, message="World" , document.body);
project/templates/master_pages/helloworld.html
{% load staticfiles %}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React Hello World</title>
</head>
<body>
<h1> </h1>
<script src="http://fb.me/react-0.12.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src= '{% static "js/jstest.js" %}' ></script>
</body>
</html>
解决方案
After lots of trial and error I found out that my jsx would only render if I added type="text/jsx" in my script path.
这篇关于反应JS不渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文