<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...请问这段代码哪里写错了?要怎么改正?谢谢。
这个函数的结束的地方是不是少了个右括号和分号?
现在:
期待: