反应 - 语法问题

React - Issue with syntax

本文关键字：问题语法反应更新时间：2023-09-26

我正在尝试自己测试 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"));

看来你可以简化一点。

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"));