React.js: tutorial app not working

StackOverflow https://stackoverflow.com/questions/20964718

  •  25-09-2022
  •  | 
  •  

题

Here's the code for my React tutorial app:

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"}
]

When I run it in firefox, I get:

Error: Parse Error: Line 67: Unexpected identifier

and Line 67 is:

for (var i = 0, l = array.length; l > i; ++i) {

I don't see what's wrong with that line. Any ideas what's going on?

有帮助吗？

解决方案

Not sure what file you got your line 67 from, but here are lines 65 through 69 of your JSX file:

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

You can see that you're missing a comma on line 66.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top