使用 React.js 出现解析错误答案

【问题标题】：Getting a parsing error in with React.js使用 React.js 出现解析错误
【发布时间】：2015-01-12 10:09:53
【问题描述】：

我正在研究他们网站上的 React 示例。到目前为止我所拥有的是：

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.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 type="text/jsx">
     var data = [
        {author: "Pete Hunt", text: "This is one comment"},
        {author: "Jordan Walke", text: "This is *another* comment"}
      ];

    var converter = new Showdown.converter();

    var CommentBox = React.createClass({
      render:function(){
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList data={this.props.data}/>
            <CommentForm />
          </div>
        );
      }
    });

    var CommentList = React.createClass({
      render:function(){
        var commentNodes = this.props.data.map(function(comment){
          return (
            <Comment author={comment.author}>
              {comment.text}
            <Comment />
          );
        });
        return (
          <div className="commentList">
           {commentNodes}
          </div>
        );
      }
    });

    var Comment = React.createClass({
      render:function(){
        converter.makeHtml(this.props.children.toString())
        return(
          <div className="comment">
          <h2 className="commentAuthor">
            {this.props.author}
          </h2>
            <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        );
      }
    });

    React.render(
      <CommentBox data={data} />,
      document.getElementById("content")
    );
</script>
</body>
</html>

我目前只是在我的网络浏览器中打开 HTML 文件，但我的控制台给了我以下错误：

错误：解析错误：第 41 行：

意外的令牌：在 file:///C:/Users/jkm144/Desktop/React_Example/template.html

渲染：函数（）{

由于某种原因，它不喜欢“：”，指向第一次使用它的页面。我浏览了代码以查找语法错误，但我什么也没看到。有没有其他人遇到过这个问题？

【问题讨论】：

在评论中你试图返回多个节点。将它们包装在一个 div 或类似的东西中。
没有骰子。我确实注意到我没有在评论中关闭我的 div 标签。我关闭并将返回中的所有内容包装在一个 div 中，但这并没有帮助。同样的错误。意外的令牌“：”

标签： javascript reactjs

【解决方案1】：

CommentList 组件中的标记有不正确的结束标记语法：

<Comment />

由于该组件有一个开始标签，它应该以</Comment> 结束。在上下文中：

损坏：

<Comment author={comment.author}>
  {comment.text}
<Comment />

固定：

<Comment author={comment.author}>
  {comment.text}
</Comment>

【讨论】：

酷。这解决了这个错误。我想我有调用模块的语法，它是带有结束标记的。仍然收到一个错误，指出在 {commentNodes} 未定义 rawMarkup。不知道那是关于什么的。我假设“rawMarkup”是在实际库中的某个地方定义的。
你需要指定rawMarkup作为转换器的输出：var rawMarkup = converter.makeHtml(this.props.children.toString());。
哦，我在我的代码中寻找了那个变量，但我想我愚蠢地忽略了它。非常感谢！