这是我的 React 教程应用程序的代码:
模板.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"></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>
评论.json:
[
{"author": "Tldr", "text": "This is a comment"},
{"author": "Tldr2", "text": "This is a comment2"}
]
当我在 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}>
您可以看到第 66 行缺少一个逗号。
关于javascript - react .js : tutorial app not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20964718/