反应JS不渲染 [英] React JS not rendering

查看:223
本文介绍了反应JS不渲染的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Pycharm作为我的IDE,用Django构建了我的项目的后端。我现在决定使用React js前进前端。我开始用一些简单的教程,但不能得到代码来渲染任何东西。奇怪的是,如果我在Atom io中完成了相同的教程并打开了html文件,那么代码按预期的方式呈现。与Pycharm相同的代码作为空白页出现。我尝试在runserver之后打开chrome和firefox,但没有成功。



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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆