React JS 不渲染

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

看看这个 fiddle 问题出在你的代码上。

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 不渲染

React JS not rendering

django

pycharm

reactjs