Question

以下是我的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"></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>

comments.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) {

我看不出那条线有什么问题。有什么想法正在发生什么？

Answer 1

不确定你的第67行是哪个文件，但这里是你的JSX文件的第65到69行：

65:     return false
66: }
67: render: function() {
68:     return (
69:         <form className='commentForm' onSumbmit={this.handleSubmit}>

您可以在第66行看到错过逗号。

React.js：教程应用程序无法正常工作

1 个答案: