"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

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

通过使用 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))}

Answer 2

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

"this" 在组件的渲染函数中

"this" inside a component's render function

this

reactjs