在React.js中遇到解析错误

Question

我正在他们网站上研究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行：

意外令牌：位于文件：/// C：/Users/jkm144/Desktop/React_Example/template.html

渲染：函数（）{

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

Answer 1

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

<Comment />

由于该组件具有一个开始标记，因此应使用</Comment>将其关闭。 在上下文中：

破碎：

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

固定的 ：

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

在React.js中遇到解析错误

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-17 17:01:35

在React.js中遇到解析错误

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-17 17:01:35

解决方案1
2 已采纳 2014-11-17 17:01:35