2014-11-14 6 views
1

저는 그들의 웹 사이트에서 예를 찾고 있습니다. 내가 지금까지있는 것은 :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 :

예기치 않은 토큰 : 파일에서 : /// C : /Users/jkm144/Desktop/React_Example/template.html

렌더링 : 함수() {

어떤 이유

, 그것을 좋아하지 않는다":"은 처음 사용 된 페이지를 가리 킵니다. 구문 오류를 찾기 위해 코드를 살펴 보았지만 아무 것도 볼 수 없습니다. 다른 사람이이 문제를 겪었습니까? 그 컴포넌트는 개구 태그가

<Comment /> 

때문에 </Comment>는 폐쇄되어야한다

+0

. div 또는 유사 항목으로 묶습니다. – FakeRainBrigand

+0

주사위가 없습니다. 내가 주석에 내 div 태그를 닫지 않은 것을 알았습니다. 내가 닫은 div에서 반환에 모든 것을 싸서,하지만 그건 도움이되지 않았다. 같은 오류. 예기치 않은 토큰 ":" – jordaniac89

답변

2

CommentList 구성 요소의 태그가 잘못 종료 태그 구문을 갖는다.

BROKEN : 맥락에서

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

을 고정 : 여러 노드를 반환하려는 의견에

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

차갑습니다. 그 오류를 수정했습니다. 모듈을 호출하는 문법이 있다고 생각합니다. 닫는 태그는 입니다. {commentNodes}에서 rawMarkup이 정의되지 않았다는 오류가 계속 표시됩니다. 그게 뭔지 확실하지 않습니다. "rawMarkup"이 실제 라이브러리의 어딘가에 정의되어 있다고 가정합니다. – jordaniac89

+1

'rawMarkup'을 변환기의 출력으로 지정해야합니다 :'var rawMarkup = converter.makeHtml (this.props.children.toString());'. –

+0

Ooooh, 나는 내 코드에서 그 변수를 찾았지만 나는 그것을 바보로 간과했다고 생각한다. 고마워요! – jordaniac89

관련 문제