反应 - 语法问题

Question

我正在尝试为自己测试反应。我收到了一个简单的“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"));