Javascript React.js:教程应用程序不工作
以下是我的React教程应用程序的代码: template.html:Javascript React.js:教程应用程序不工作,javascript,reactjs,Javascript,Reactjs,以下是我的React教程应用程序的代码: template.html: <html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.8.0.js"></script> <script src="http://fb.me/JSXTransformer-0.8.0.js">
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data})
}.bind(this)
})
},
handleCommentSubmit: function(comment) {
var comments = this.state.data
var newComments = comments.concat(comment)
this.setState({data: newComments})
$.ajax({
url: this.props.url,
success: function(data) {
this.setState({data: data})
}.bind(this)
})
},
getInitialState: function() {
return {data: []}
},
componentWillMount: function() {
this.loadCommentsFromServer()
setInterval(this.loadCommentsFromServer, this.props.pollInterval)
},
render: function() {
return (
<div className='commentBox'>
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</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 CommentForm = React.createClass({
handleSubmit: function() {
var author = this.refs.author.getDOMNode().value.trim()
var text = this.refs.text.getDOMNode().value.trim()
if (!text || !author) {
return false
}
this.props.onCommentSubmit({author: author, text: text})
this.refs.author.getDOMNode().value = ''
this.refs.text.getDOMNode().value = ''
return false
},
render: function() {
return (
<form className='commentForm' onSumbmit={this.handleSubmit}>
<input type='text' placeholder='Your name' ref='author'/>
<input type='text' placeholder='Your comment' ref='text'/>
<input type='submit' value='Post' />
</form>
</div>
)
}
})
var Comment = React.createClass({
render: function() {
return (
<div className='comment'>
<h2 className='commentAuthor'>
{this.props.author}
</h2>
{this.props.children}
</div>
)
}
})
React.renderComponent(
<CommentBox url='comments.json' pollInterval={2000}/>,
document.getElementById('content')
)
</script>
</body>
</html>
当我在firefox中运行它时,我得到:
Error: Parse Error: Line 67: Unexpected identifier
第67行是:
for (var i = 0, l = array.length; l > i; ++i) {
我看不出那条线有什么问题。有什么想法吗?不确定第67行是从哪个文件获得的,但这里是JSX文件的第65到69行:
65: return false
66: }
67: render: function() {
68: return (
69: <form className='commentForm' onSumbmit={this.handleSubmit}>
65:返回false
66: }
67:render:function(){
68:返回(
69:
您可以看到第66行缺少一个逗号。捕捉得很好!但现在我得到:未捕获错误:解析错误:第75行:无效正则表达式:缺少/。第75行是handleSubmit函数的最后一行-返回false。您永远不会打开后关闭,无论是在前添加还是在后删除
65: return false
66: }
67: render: function() {
68: return (
69: <form className='commentForm' onSumbmit={this.handleSubmit}>