组件的“渲染功能”内的“this”

Question

class GenreDropdown extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     genre: this.props.genres[0].genre 
    } 

    this.onGenreSelected = this.onGenreSelected.bind(this); 
    } 

    onGenreSelected(event) { 
    console.log("genre selected!!"); 
    } 

    render() { 
    return (
     <div className="genre-dropdown"> 
     {this.props.genres.map(function (genreUrlPair, idx) { 
      return (
      <div 
       className="genre-item" 
       onClick={this.onGenreSelected} <== this is undefined!! 
      > 
       {genreUrlPair.genre} 
      </div> 
     ) 
     })} 
     </div> 
    ); 
    } 
} 

Q1。我想要this在标记点处引用GenreDropdown组件。我做错了什么？ Q2。你会做一个GenreItem组件吗？

Answer 1

Array.prototype.map需要被用作this作为第一个参数传递的函数内的第二个可选参数的上下文。通过this，这是指在map被调用时的GenreDropdown实例：

render() { 
    return (
    <div className="genre-dropdown"> 
     {this.props.genres.map(function (genreUrlPair, idx) { 
     return (
      <div 
      className="genre-item" 
      onClick={this.onGenreSelected} 
      > 
      {genreUrlPair.genre} 
      </div> 
     ) 
     }, this)} 
    </div> 
); 
} 

Answer 2

你的函数创建了它自己的上下文。

通过使用function（）{}，这将创建它自己的绑定。所以，你既可以使用箭头功能

{this.props.genres.map((genreUrlPair, idx) => { 
     return (
     <div 
      className="genre-item" 
      onClick={this.onGenreSelected} <== this is undefined!! 
     > 
      {genreUrlPair.genre} 
     </div> 
    ) 
    })} 

或结合自己

{this.props.genres.map(function (genreUrlPair, idx) { 
     return (
     <div 
      className="genre-item" 
      onClick={this.onGenreSelected} <== this is undefined!! 
     > 
      {genreUrlPair.genre} 
     </div> 
    ) 
    }.bind(this))}