Question

我正在尝试将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>
  }
})

但是子元素中的函数是未定义的，并且也无法使函数在嵌套子元素中可用。

https://jsfiddle.net/yk5nomzb/1/

任何帮助将不胜感激

Answer 1

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

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

同样在Comment组件中，您需要向子Comment组件添加handleClick属性，如下所示：

  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问题。

Codesandbox

将道具传递给React中的父componenet

1 个答案: