Question

我们正在发表评论，每条评论都有儿童（答案，也有评论）我们像这样初始化组件：

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

我们有以下Reactcomponents

CommentList 评论 VoteBar EditBar

它们按以下顺序使用（列表然后呈现许多注释，每个注释呈现一个投票栏和一个编辑栏）

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将自动更改状态，如果我们更改了List，则注释也会有（因为它再次呈现，对吗？）

**这是考虑React如何工作的一般方式，还是这样呢？**

Answer 1

我为你创造了一个简单的例子。无法将所有代码放在此处，因此请从here

下载

运行步骤

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

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

代码中的注释解释了很多内容

希望有所帮助

正确使用Component和Children Component访问父节点状态

1 个答案: