javascript - React - 语法问题

Question

我正在尝试亲自测试 React。我成功输出了一条简单的“Hello World”消息，因此我尝试更进一步并循环数据。

我收到一个“等待根加载...重新加载检查器”错误，谷歌搜索后告诉我我的语法有问题。我只是找不到它...所以你的帮助很大赞赏!

var data = [
    {perc:"2.2%", year:"5"},
    {perc:"3.2%", year: "7"} 
]

var Rates = React.createClass({
    render: function(){
        return (
            <div>
                <RateList data={this.props.rates} />
            </div>
        )
    }
});

var Rate = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    <li>{this.props.percent}</li>
                </ul>
            </div>
        )
    }
});

var RateList = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    { this.props.data.map(function(rate){
                        return <Rate percent={rate.perc} />
                    }) }
                </ul>
            </div>
        )
    }
});

ReactDOM.render(<Rates rates={data} />, document.getElementById("wow"));

Answer 1

看来你可以简化一点。

var data = [
    {perc:"2.2%", year:"5"},
    {perc:"3.2%", year: "7"} 
]

var RateList = React.createClass({
    render: function(){
        return (
            <div>
                <ul>
                    { this.props.rates.map(function(rate){
                        return <li>{rate.perc}</li>
                    }) }
                </ul>
            </div>
        )
    }
});

ReactDOM.render(<RateList rates={data} />, document.getElementById("wow"));