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行：

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

render：function（）{

出于某种原因，它不喜欢＆＃34;：＆＃34;，指向它第一次使用的页面。我已经通过代码查找语法错误，但我什么也看不见。还有其他人有这个问题吗？

Answer 1

CommentList组件中的标记具有错误的结束标记语法：

<Comment />

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

<强> BROKEN ：

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

<强>固定：

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

使用React.js获取解析错误

1 个答案: