Question

目前关于React（react_tuto）的facebook教程。我不明白2个组件如何进行通信，因此在“提交评论按钮”时，动态地附加“评论列表”。

目前，评论是在服务器上创建的，但仅在页面刷新时显示在页面上


评论如何显示在提交按钮上？

这是我的AddComment组件

 var AddComment = React.createClass({
  getInitialState: function(){
    return {
      content: this.props.content,
      adrien: "before"
    }
  },

  handleKeyUp: function(e) {
    this.setState({
      content: this.refs.addComment.getDOMNode().value,
    })
  },

  handleValidation: function() {
    var that = this
    $.ajax({
      type: "POST",
      data: {comment: { content: that.state.content } },
      url: Routes.create_comment_path({format: 'json'}),
      success: function(data) {
       that.setState({
         content: "",
         adrien: "after"
       })
      }
    })
  },

  render: function(){
    return (
      <div>
      <textarea onKeyUp={this.handleKeyUp} value={this.state.value} ref="addComment"></textarea>
      <button onClick={this.handleValidation}>submit</button>
      </div>
    )
  }

})

这是我的CommentList组件：

var CommentList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.comments.map(function(comment){
          return <CommentListElement key={comment.id} comment={comment} />;
        })}
      </div>
    );
  }
});

Answer 1

您需要一个共同的父组件来进行不同组件之间的通信。

我已经更新了一些示例以包含公共父组件CommentSystem

注意：我已经删除了ajax调用，只显示组件之间的通信。

检查以下链接。

https://jsfiddle.net/j4yk3pzc/15/

额外信息：

在反应中，我们将状态存储在父组件上并将它们传递给子组件。与状态一起，我们还传递操作来操纵数据到孩子们。当子组件想要更新从父组件传递给它的数据时，它会触发从父组件传递的操作。这称为数据向下动作方法。数据从父级传递给子级到孙级。行动从孙子传播到孩子到父母。

如果您不想创建父组件，那么您可以使用一些基于发布/订阅或基于EventEmitter的系统在没有共同父级的子级之间进行通信。

参考：

http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/

代码：

var CommentSystem = React.createClass({
    getInitialState: function() {
    return {
       comments: []
    }
  },
  addComments: function(comment) {
    var comments = this.state.comments;
    comments.push(comment);
    this.setState({comments: comments})
  },
  render: function() {
    return (
      <div>
        <AddComment addComments={this.addComments}/>
        <CommentList comments={this.state.comments}/>
      </div>
      )
  }
})

var AddComment = React.createClass({
  getInitialState: function(){
    return {
      content: this.props.content,
      adrien: "before"
    }
  },

  handleKeyUp: function(e) {
    this.setState({
      content: this.refs.addComment.getDOMNode().value,
    })
  },

  handleValidation: function() {
    var that = this;
    this.props.addComments(this.state.content);
  },

  render: function(){
    return (
      <div>
      <textarea onKeyUp={this.handleKeyUp} value={this.state.value} ref="addComment"></textarea>
      <button onClick={this.handleValidation}>submit</button>
      </div>
    )
  }
})

var CommentList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.comments.map(function(comment){
          return <CommentListElement key={comment.id} comment={comment} />;
        })}
      </div>
    );
  }
});

var CommentListElement = React.createClass({
  render: function() {
    return (
     <div>{this.props.comment}</div>
     )
  }
})

React.render(<CommentSystem/>, document.getElementById('container'));

希望这有帮助。

React / Rails：动态地将元素追加到DOM

1 个答案: