React.js: tutorial app not working

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

  •  25-09-2022
  •  | 
  •  

Question

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?

Était-ce utile?

La solution

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top