使用React.js獲取解析錯誤

我正在從他們的網站上處理React示例。我至今是：使用React.js獲取解析錯誤

<!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

渲染：函數（）{

出於某種原因，它不喜歡「：」，指向首次使用的頁面。我已經通過代碼來查找語法錯誤，但我什麼也沒看到。有沒有其他人有這個問題？

來源

2014-11-14 jordaniac89

在評論你試圖返回多個節點。用div或類似的東西包裝它們。 – FakeRainBrigand 2014-11-14 22:51:15

沒有骰子。我注意到我沒有在Comment中關閉我的div標籤。我關閉並將所有內容都包裹在div中，但這並沒有幫助。同樣的錯誤。意外的令牌「：」 – jordaniac89 2014-11-17 14:24:48

在CommentList組件的標記有不正確的關閉標籤的語法：

<Comment />

由於該組件具有一開口標記時，它應與</Comment>關閉。在上下文：

BROKEN：

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

固定：

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

來源

2014-11-17 17:01:35

很酷。這解決了這個錯誤。我想我有用於調用模塊的語法，這將是與結束標記。仍然收到錯誤消息，指出rawMarkup未在{commentNodes}中定義。不確定那是關於什麼的。我假設「rawMarkup」是在實際庫中的某處定義的。 – jordaniac89 2014-11-17 19:33:29

您需要分配'rawMarkup'作爲轉換器的輸出：'var rawMarkup = converter.makeHtml（this.props.children.toString（））;'。 – 2014-11-17 19:42:47

Ooooh，我在代碼中查找了這個變量，但我想我愚蠢地忽略了它。非常感謝！ – jordaniac89 2014-11-17 20:05:34

使用React.js獲取解析錯誤

回答

相關問題