正确使用组件和子组件访问父级状态

Question

我们有注释，每个注释都有子注释(答案，也包括注释)，我们初始化组件如下：

=react_component "CommentList", url: object_comments_path(current_object), page: 1

我们有以下的反应组件

CommentList Comment VoteBar EditBar

它们按以下顺序使用(列表将呈现多个注释，每个注释呈现一个votebar和一个编辑条)

CommentList
-> Comment
  -> VoteBar
  -> EditBar

如果初始化了CommentList，它将从服务器加载注释(第1页)，并将它们保存到状态。

this.setState( {comments: all_comments} );

然后，呈现函数只呈现注释列表。

# CommentList
render: function() {
  comments = this.state.comments.map(function(comment) {
    return <Comment key={comment.id} comment={comment} />
  });
  return <div className="commentsList">{comments}</div>
}

**我的问题：**

我们将每个Comment的值作为属性给出。如果我们想要vote一个注释( VoteBar正在做的)，那么我们如何更改CommentList的状态，以便将那里的注释标记为voted=true

有更好的方法吗？我们能把状态双向地放到其他类中吗？让我们假设注释列表将&comment输入到Comment中。如果我们更改Comment的状态，CommentList将自动使状态也更改，如果我们更改列表，注释也将拥有它(因为它再次呈现，对吗？)

**这是一种思考反应的一般方式，还是这条路走了？

Answer 1

我为你创造了一个简单的例子。不能把所有的代码都放在这里，所以从这里下载

要运行的步骤

1. Extract and change directory
2. npm install
3. npm start

它应该启动浏览器或转到localhost:3000

代码中的注释解释了大部分内容。

希望它能帮上忙