Question

这是我第一次做出反应的经历。我不明白为什么以下代码在render函数上返回错误。

    var LikeButton = React.createClass({
        getInitialState: function() {
            return { liked: false };
        }

        render: function() {
            if (this.state.liked)
                return <div>Ti piace!</div>
            else
                return <a href="#" onClick={this.doLike}>Mi piace</a>
        }

        doLike: function() {
            this.setState({ liked: true });
        }
    });
    ReactDOM.render(<LikeButton />, document.body);

此代码位于代码<script type = "text/babel">。

Answer 1

似乎虽然您在脚本类型中提供了babel，但这并不意味着您的代码实际编译过。

您可以尝试使用Create React App实用程序为React开发设置有效的环境。

Answer 2

错误如下：

Uncaught SyntaxError: embedded: Unexpected token (7:3)
   5 |          }
   6 |  
>  7 |          render: function() {
     |    ^
   8 |              if (this.state.liked)
   9 |                  return <div>Ti piace!</div>
  10 |              else
    at Parser.pp.raise (browser.js:65620)
    at Parser.pp.unexpected (browser.js:66850)
    at Parser.pp.expect (browser.js:66844)
    at Parser.pp.parseObj (browser.js:65244)
    at Parser.pp.parseExprAtom (browser.js:65040)
    at Parser.parseExprAtom (browser.js:68226)
    at Parser.pp.parseExprSubscripts (browser.js:64884)
    at Parser.pp.parseMaybeUnary (browser.js:64865)
    at Parser.pp.parseExprOps (browser.js:64811)
    at Parser.pp.parseMaybeConditional (browser.js:64793)

Answer 3

React.createClass将对象作为参数，对象的每个属性都需要用逗号分隔（，）。

你只需要这样做：

var LikeButton = React.createClass({
    getInitialState: function() {
        return { liked: false };
    }, // comma

    render: function() {
        if (this.state.liked)
            return <div>Ti piace!</div>
        else
            return <a href="#" onClick={this.doLike}>Mi piace</a>
    }, // comma

    doLike: function() {
        this.setState({ liked: true });
    }
});
ReactDOM.render(<LikeButton />, document.body);

您可以在this fiddle上看到您的代码正在使用。

了解React中的渲染错误

3 个答案: