Question

我试图将一个函数deleteComment（）从我的父组件传递给子组件，这样当单击子组件时，它将运行deleteComment（）。如您所见，我在CommentBox中定义了deleteComment（）并将其传递给CommentList组件，然后传递给Comment组件。当我尝试只向下传递一次到CommentList时，onClick事件工作和deleteComment运行，但是一旦我将它传递到另一个级别，它就不会。在嵌套多个组件时，我是否错误地引用了该函数？

var Comment = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },
  render: function() {
    return(
      <div className="comment" onClick={this.props.onDeleteComment}>
        <h3 className="commentTag"><span className="commentTitle">{this.props.title}</span> by <span className="commentAuthor">{this.props.author}</span><i className="fa fa-times"></i></h3>
        <div className="commentBody"><span dangerouslySetInnerHTML={this.rawMarkup()}/></div>
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
     return (
       <Comment author={comment.author} key={comment.id} title={comment.title}>
         {comment.text}
       </Comment>
     );
   });
   return(
     <div className="commentList" onDeleteComment={this.props.onDelete}>
        {commentNodes}
     </div>
   )
  }
});

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
     var comments = this.state.data;
     comment.id = Date.now();
     var newComments = comments.concat([comment]);
     this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: comments});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  deleteComment: function() {
    alert("test");
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
   this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
 },
  render: function() {
    return(
      <div className="commentBox">
        <ul className="mainBar">
          <li className="active">Updates</li>
        </ul>
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
        <CommentList data={this.state.data} onDelete={this.deleteComment}/>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox url="/api/comments" pollInterval={500} />,
  document.getElementById('content')
);

Answer 1

CommentList正在渲染

return( 
  <div className="commentList" onDeleteComment={this.props.onDelete}>
    {commentNodes}
  </div>
)

您希望将onDeleteComment传递给Comment，而不是将它们包裹起来。

但是因为它是.map d的匿名函数，所以范围更改。告诉this .bind应该是什么

  this.props.data.map(function(comment) {
   return (
     <Comment author={comment.author} key={comment.id} title={comment.title} onDeleteComment={this.props.onDelete}>
       {comment.text}
     </Comment>
   );
  }.bind(this))

在React中嵌套三个组件

1 个答案: