React - 无法读取undefined的属性'commentDelete'

Question

我正在使用React教程，并且在尝试在注释上设置删除按钮以返回要删除的注释的ID时遇到问题。

我认为它因为地图功能已经切断了我的范围到道具，但不确定如何解决这个问题。

未捕获的TypeError：无法读取未定义的属性“commentDelete”

  handleDelete: function(commentId)
  {
      alert('HANDLE')
      //e.preventDefault();
      $.ajax({
          url: this.props.url,
          dataType: 'json',
          type: 'delete',
          data: commentId,
          success: function(data) {
              this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
              console.error(this.props.url, status, err.toString());
          }.bind(this)
      });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList onCommentDelete={this.handleDelete} data={this.state.data}/>
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
      </div>
    );
  }
});

var CommentList = React.createClass({
render: function() {
    alert('TEST');
    var commentNodes = this.props.data.map(function (comment) {

        return (
          <Comment onCommentDelete={this.props.onCommentDelete} commentId={comment.commentId} author={comment.author}>
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^

      {comment.text}
    </Comment>
  );
});

更新： 绑定（这个）完成了这项工作，现在我必须明白为什么:)谢谢

或者我也让它像这样工作......

var CommentList = React.createClass({
    render: function() {
        var deletefunc = this.props.onCommentDelete;
            ^^^^^^^^^^
        var commentNodes = this.props.data.map(function (comment) {
            return (
              <Comment onCommentDelete={deletefunc} commentId={comment.commentId} author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
  }
);