在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