在 React 中嵌套三个组件

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，而不是 div 包装它们。

但由于它是 .mapd 的匿名函数，因此范围发生了变化。用 .bind

告诉它 this 应该是什么

  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 中嵌套三个组件

Nesting three components in React

javascript

json

components

reactjs