Question

我根据React教程（http://facebook.github.io/react/docs/tutorial.html）设置了所有内容。我是在Python服务器上做的。

加载了React（事实上插入了阴影dom，它建议我安装React工具）。

我使用jsx离线变压器：

# in public/js directory
jsx --watch src/ build/
# terminal output (Linux) follows....
built Module("react")
["app","react"]
app.js changed; rebuilding...
built Module("app")
["app","react"]

公开/ index.html中

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="js/build/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    <script type="text/jsx" src="js/build/app.js"></script> 
  </head>
  <body>
    <div id="content"></div> <!-- here the React component is instantiated -->

  </body>
</html>

public / js / src / app.js （JSX在教程中）

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

应转换为（ public / js / build / app.js ）：

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

但它实际上并没有（我看到＆＃34;文件已经改变了......＆＃34;在运行jsx变换器的终端中）。

此外，我尝试关闭jsx转换器并使用第二个代码块手动覆盖build / app.js。但是，在任何情况下都不会呈现任何内容。

Answer 1

实际上，你的src文件应该包含JSX文件，而你的发行版或构建文件夹应该包含已编译的（仅限javascript）文件。

我在jsFiddle中运行代码并且代码有效。它可能与文件位置有关。如果您可以查看浏览器控制台日志并向我们显示任何可以帮助我们的错误消息。

Answer 2

如果您已经离线转换jsx文件，则脚本标记应为

 <script type="text/js" src="js/build/app.js"></script>

而不是

 <script type="text/jsx" src="js/build/app.js"></script>

ReactJS入门教程：jsx转换未发生且元素未显示

2 个答案: