Question

我使用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>
  </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>

Answer 1

看看这个小提琴问题是你的代码在这里。

React.render(HelloMessage, message="World" , document.body);

这是反应代码。您的代码中的问题是您缺少关闭的html标记。

React.render(<HelloMessage message="World" /> , document.body);

https://jsfiddle.net/kyoukhana/rLg9p8qL/2/

Answer 2

经过大量的反复试验后，我发现只有在我的脚本路径中添加了type =“text / jsx”，我的jsx才会呈现。

React JS没有渲染

2 个答案: