javascript - Getting a parsing error in with React.js

I'm working on the React example from their website. What I have so far is:

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
    <script src=".12.0.js"></script>
    <script src=".12.0.js"></script>
    <script src=".10.0.min.js"></script>
     <script src=".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 ment"},
        {author: "Jordan Walke", text: "This is *another* ment"}
      ];

    var converter = new Showdown.converter();

    var CommentBox = React.createClass({
      render:function(){
        return (
          <div className="mentBox">
            <h1>Comments</h1>
            <CommentList data={this.props.data}/>
            <CommentForm />
          </div>
        );
      }
    });

    var CommentList = React.createClass({
      render:function(){
        var mentNodes = this.props.data.map(function(ment){
          return (
            <Comment author={ment.author}>
              {ment.text}
            <Comment />
          );
        });
        return (
          <div className="mentList">
           {mentNodes}
          </div>
        );
      }
    });

    var Comment = React.createClass({
      render:function(){
        converter.makeHtml(this.props.children.toString())
        return(
          <div className="ment">
          <h2 className="mentAuthor">
            {this.props.author}
          </h2>
            <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        );
      }
    });

    React.render(
      <CommentBox data={data} />,
      document.getElementById("content")
    );
</script>
</body>
</html>

I'm currently just opening the HTML file in my web browser, but my console is giving me the following error:

Error: Parse Error: Line 41:

Unexpected token : at file:///C:/Users/jkm144/Desktop/React_Example/template.html

render:function(){

For some reason, it doesn't like the ":", pointing to the first time on the page it's used. I've gone through the code to look for syntax errors, but I don't see anything. Has anyone else had this problem?

I'm working on the React example from their website. What I have so far is:

<!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./jquery-1.10.0.min.js"></script>
     <script src="http://cdnjs.cloudflare./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 ment"},
        {author: "Jordan Walke", text: "This is *another* ment"}
      ];

    var converter = new Showdown.converter();

    var CommentBox = React.createClass({
      render:function(){
        return (
          <div className="mentBox">
            <h1>Comments</h1>
            <CommentList data={this.props.data}/>
            <CommentForm />
          </div>
        );
      }
    });

    var CommentList = React.createClass({
      render:function(){
        var mentNodes = this.props.data.map(function(ment){
          return (
            <Comment author={ment.author}>
              {ment.text}
            <Comment />
          );
        });
        return (
          <div className="mentList">
           {mentNodes}
          </div>
        );
      }
    });

    var Comment = React.createClass({
      render:function(){
        converter.makeHtml(this.props.children.toString())
        return(
          <div className="ment">
          <h2 className="mentAuthor">
            {this.props.author}
          </h2>
            <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        );
      }
    });

    React.render(
      <CommentBox data={data} />,
      document.getElementById("content")
    );
</script>
</body>
</html>

I'm currently just opening the HTML file in my web browser, but my console is giving me the following error:

Error: Parse Error: Line 41:

Unexpected token : at file:///C:/Users/jkm144/Desktop/React_Example/template.html

render:function(){

Share Improve this question asked Nov 14, 2014 at 22:19 jordaniac89 5743 gold badges8 silver badges28 bronze badges

in Comment you're trying to return multiple nodes. Wrap them in a div or similar. – Brigand Commented Nov 14, 2014 at 22:51
No dice. I did notice that I didn't close my div tag in Comment. I closed and wrapped everything in the return in a div, but that didn't help. Same error. Unexpected token ":" – jordaniac89 Commented Nov 17, 2014 at 14:24

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

The markup in the CommentList ponent has incorrect closing tag syntax:

<Comment />

Since that ponent has an opening tag, it should be closed with </Comment>. In context:

BROKEN:

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

Fixed:

<Comment author={ment.author}>
  {ment.text}
</Comment>
#  <--- / backslash was displaced

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Getting a parsing error in with React.js - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)