渲染方法在映射内部值时崩溃

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> 
} 

只有当您可以省略括号时你有一个参数。