Question

我松散地关注facebooks React教程， http://facebook.github.io/react/docs/getting-started.html，但我将其应用于其他html文件。

这是我的html文件，基于react starter kit：

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="build/comment.js"></script>
  </body>
</html>

我安装了react-tools，现在当我运行“jsx --watch src / build /”

时

正在转换此代码段：

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

进入此片段：

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

但是教程显示了这个片段：

// tutorial1-raw.js
var CommentBox = React.createClass({
  render: function() {
    return (
      React.DOM.div({
        className: 'commentBox',
        children: 'Hello, world! I am a CommentBox.'
      })
    );
  }
});
React.renderComponent(
  CommentBox({}),
  document.getElementById('content')
);

由于小写'r'，网页会抛出错误，“未定义反应”。这是真的。从chrome的控制台我可以确认“React”，而不是“反应”。

如何让jsx构建正确的输出，如教程中所述？

Answer 1

在JSX文件的顶部，你应该有评论：

/** @jsx React.DOM */

我猜你把它误输了为react.DOM。

jsx --watch将jsx语法转换为小写“react”而不是大写“React”

1 个答案: