渲染方法在映射內部值時崩潰

Question

我有一個組件（一個下拉列表），它應該基於從另一個組件作爲「classes」prop傳入的數組填充列表。爲了使其儘可能高效，我試圖使用Object.keys和Array.prototype.map方法遍歷數組，填充列表和渲染。但是，每當我添加這個組件，它就會導致我的整個應用程序根本不渲染。我在下面列出了我的渲染方法。

Render方法：

export default React.createClass({ 

    change: function(){ 
     console.log(this.props.classes); 
    }, 

    render: function(){ 

     return(
      <div> 

      <select onChange = {this.change}> 
      { 
       Object.keys(this.props.classes).map(value, key =>{ 

       return <option key = {key}>{value}</option> 
       } 
      )} 
       </select> 
      </div> 

     ) 

    } 

}); 

Answer 1

回調參數需要額外的括號我想：

export default React.createClass({ 

    change: function(){ 
     console.log(this.props.classes); 
    }, 

    render: function(){ 

     return(
      <div> 

      <select onChange = {this.change}> 
      { 
       Object.keys(this.props.classes).map((value, key) =>{ 

       return <option key = {key}>{value}</option> 
       } 
      )} 
       </select> 
      </div> 

     ) 

    } 

}); 

Answer 2

當您使用ES2015箭頭的功能，你有一個以上的參數，你需要把周圍的括號參數如下所示：

Object.keys(this.props.classes).map((value, key) => { 
    return <option key={key}>{value}</option> 
} 

只有當您可以省略括號時你有一個參數。