Javascript 在React中将道具传递给父组件

我正在尝试将id从子组件和嵌套组件传递给其父组件

var Comment = React.createClass({
handleClick: function(id){
                console.log(this.props, id)
       this.props.handleClick(this.props.comment.id)
   },
  render: function() {
    var comment = this.props.comment
    return <div className="Comment">
      <div onClick={()=> this.handleClick(comment.id)} dangerouslySetInnerHTML={{__html: comment.comment_text}}/>
      {comment.children.length > 0 && comment.children.map(function(child) {
        return <Comment key={child.id} comment={child}/>
      })}
    </div>
  }
})

但是子函数中的函数是未定义的，也不能使函数在嵌套子函数中可用

---

任何帮助都将不胜感激

我通过将App.js渲染中的函数更改为箭头函数使其正常工作，如下所示：

  render() {
    return (
      <div>
        {this.props.comments.map(comment => {
          return (
            <Comment key={comment.id}
              handleClick={this.handleClick}
              comment={comment}
            />
          );
        })}
      </div>
    );
  }

  render() {
    var comment = this.props.comment;
    return (
      <div className="Comment">
        <div
          onClick={() => this.handleClick(comment.id)}
          dangerouslySetInnerHTML={{ __html: comment.comment_text }}
        />
        {comment.children.length > 0 &&
          comment.children.map(child => {
            return (
              <Comment
                key={child.id}
                handleClick={this.props.handleClick}
                comment={child}
              />
            );
          })}
      </div>
    );
  }

此外，在注释组件中，还需要向子注释组件添加handleClick道具，如下所示：

  render() {
    return (
      <div>
        {this.props.comments.map(comment => {
          return (
            <Comment key={comment.id}
              handleClick={this.handleClick}
              comment={comment}
            />
          );
        })}
      </div>
    );
  }

  render() {
    var comment = this.props.comment;
    return (
      <div className="Comment">
        <div
          onClick={() => this.handleClick(comment.id)}
          dangerouslySetInnerHTML={{ __html: comment.comment_text }}
        />
        {comment.children.length > 0 &&
          comment.children.map(child => {
            return (
              <Comment
                key={child.id}
                handleClick={this.props.handleClick}
                comment={child}
              />
            );
          })}
      </div>
    );
  }

因此，问题可能是javascript中著名的this和bind问题

---

处理来自父级的操作并将该函数传递给子级。@VahidAkhtar我相信这正是我所做的。那么问题出在哪里？因为如果您通过获取孩子的id来处理来自家长的操作，将会正常工作。您检查了我共享的小提琴了吗@VahidAkhtarThanks获得答案，但当我单击注释子递归组件时，抛出一个错误：TypeError:_this.props.handleClick不是代码中的函数请单击最后一条注释SDFDSFDSDFDSFDDSFDS，然后检查日志，thanks@Enzo好吧，我没注意到你有孩子的评论，我更新了答案和代码沙盒。你能检查一下吗？