React入门项目语法错误

<html>
    <head>
        <title>test store with user input and request</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    </head>
    <body>
        <h1><span class="label label-info">REACT_DEMO_04</span></h1>
        <br/>
        <div id="blog_box"></div>
        <script type="text/javascript" src="../js/react.js"></script>
        <script type="text/javascript" src="../js/react-dom.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/browser.min.js"></script>
        <script type="text/babel">
            var PostLi = React.createClass({
                render: () => {
                    return (
                        <li key={this.props.pid}>
                            {this.props.title}
                            <br/>
                            {this.post.content}
                        </li>
                    )
                }
            });
            var SideBar = React.createClass({
                render: () => {
                    const items = this.props.posts.map(
                            (post)=>{
                                return 
                                  <PostLi key={post.id} pid={post.id}/>
                            });
                    return (
                        <ul>
                            {items}
                        </ul>
                    );
                }
            });
            var ContentBox = React.createClass({
                render: ()=>{
                    return (
                        <ul>
                            { 
                                this.props.posts.map(
                                    (post)=>{
                                        return
                                        <PostLi key={post.id} pid={post.id}/>
                                    }
                                );
                            }
                        </ul>
                    );
                }
            });
            var Blog = React.createClass({
                render:function(){
                    return (
                        <div>
                            <SideBar posts={props.posts} />
                            <br/>
                            <ContentBox posts={props.posts} />
                        </div>
                    );
                }
            }
            const post_data = [
                {id:1, title:"Hello World", content:"Welcome to learning React !!!!!!"},
                {id:2, title:"Nice", content:"Welcome to learning React !!!!!!"},
                {id:3, title:"Bye", content:"Welcome to learning React !!!!!!"},
            ];
            ReactDOM.render(
                <Blog posts={post_data}></Blog>,
                document.getElementById("blog_box")
            );
        </script>
    </body>
</html>

浏览器控制台报错如下:

browser.min.js:27 Uncaught SyntaxError: embedded: Unexpected token (37:33)
                                        <PostLi key={post.id} pid={post.id}/>
                                    }
                                );
                            }
                        </ul>
                    );
    at t.o.raise (browser.min.js:27)
    at t.u.unexpected (browser.min.js:28)
    at t.u.expect (browser.min.js:28)
    at t.m.jsxParseExpressionContainer (browser.min.js:29)
    at t.m.jsxParseElementAt (browser.min.js:29)
    at t.m.jsxParseElement (browser.min.js:29)
    at t.parseExprAtom (browser.min.js:29)
    at t.u.parseExprSubscripts (browser.min.js:27)
    at t.u.parseMaybeUnary (browser.min.js:27)
    at t.u.parseExprOps (browser.min.js:27)
o.raise @ browser.min.js:27
u.unexpected @ browser.min.js:28
u.expect @ browser.min.js:28
m.jsxParseExpressionContainer @ browser.min.js:29
m.jsxParseElementAt @ browser.min.js:29
m.jsxParseElement @ browser.min.js:29
(anonymous) @ browser.min.js:29
u.parseExprSubscripts @ browser.min.js:27
u.parseMaybeUnary @ browser.min.js:27
u.parseExprOps @ browser.min.js:27
u.parseMaybeConditional @ browser.min.js:27
u.parseMaybeAssign @ browser.min.js:27
u.parseParenAndDistinguishExpression @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseExprAtom @ browser.min.js:27
(anonymous) @ browser.min.js:29
u.parseExprSubscripts @ browser.min.js:27
u.parseMaybeUnary @ browser.min.js:27
u.parseExprOps @ browser.min.js:27
u.parseMaybeConditional @ browser.min.js:27
u.parseMaybeAssign @ browser.min.js:27
u.parseExpression @ browser.min.js:27
u.parseReturnStatement @ browser.min.js:28
u.parseStatement @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseBlock @ browser.min.js:28
u.parseFunctionBody @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseArrowExpression @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseExprAtom @ browser.min.js:27
(anonymous) @ browser.min.js:29
u.parseExprSubscripts @ browser.min.js:27
u.parseMaybeUnary @ browser.min.js:27
u.parseExprOps @ browser.min.js:27
u.parseMaybeConditional @ browser.min.js:27
u.parseMaybeAssign @ browser.min.js:27
u.parseObjPropValue @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseObj @ browser.min.js:27
u.parseExprAtom @ browser.min.js:27
(anonymous) @ browser.min.js:29
u.parseExprSubscripts @ browser.min.js:27
u.parseMaybeUnary @ browser.min.js:27
u.parseExprOps @ browser.min.js:27
u.parseMaybeConditional @ browser.min.js:27
u.parseMaybeAssign @ browser.min.js:27
u.parseExprListItem @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseExprList @ browser.min.js:27
u.parseSubscripts @ browser.min.js:27
u.parseExprSubscripts @ browser.min.js:27
u.parseMaybeUnary @ browser.min.js:27
u.parseExprOps @ browser.min.js:27
u.parseMaybeConditional @ browser.min.js:27
u.parseMaybeAssign @ browser.min.js:27
u.parseVar @ browser.min.js:28
u.parseVarStatement @ browser.min.js:28
u.parseStatement @ browser.min.js:27
(anonymous) @ browser.min.js:28
u.parseTopLevel @ browser.min.js:27
t.parse @ browser.min.js:27
i @ browser.min.js:27
r.default @ browser.min.js:4
t.parse @ browser.min.js:4
t.parseCode @ browser.min.js:4
(anonymous) @ browser.min.js:6
t.wrap @ browser.min.js:4
e.transform @ browser.min.js:6
n.run @ browser.min.js:3
l @ browser.min.js:3
i @ browser.min.js:3

新手入门React...请问这段代码哪里写错了?要怎么改正?谢谢。

阅读 1.5k
1 个回答
var Blog = React.createClass({

这个函数的结束的地方是不是少了个右括号和分号?

现在:

}

期待:

});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题