Reactjs 如何实施'；比如'；在React.js中创建提要列表

我有一个提要列表，它将提要对象作为

props

传递给子对象

//Feedlist.jsx

render : function(){
   var list = this.state.feeds.map(function(feed){
      <Feed feed={feed} addLike= /> 
   });
   return <div>{list}</div>
},
addLike : function(){
    // Sending the '/like/:feedid' request to server
    // update the whole feed list after callback
    ...
}

//Feedlist.jsx
render:function（）{
var list=this.state.feeds.map（函数（提要）{
});
返回{list}
},
addLike:function（）{
//正在将“/like/：feedid”请求发送到服务器
//在回调后更新整个提要列表
...
}

这是带有类似按钮的提要组件

//Feed.jsx

render : function(){
  return <div>
     <div>this.props.feed.content</div>
     <LikeButton addLike={this.props.addLike} />
  <div>
}

//LikeButton.jsx
render : function(){
   var className = this.props.isLike ? "likeBtn active" : "likeBtn";
   return <div className={className} onClick={this.addLike}></div>
}

//Feed.jsx
render:function（）{
返回
this.props.feed.content
}
//LikeButton.jsx
render:function（）{
var className=this.props.isLike？“likeBtn活动”：“likeBtn”；
返回
}

单击“like”按钮时，将向按钮添加

active

类

但是所有提要都是由静态的

道具从上到下呈现的。我是否必须从下到上触发回调才能进行此更改

我认为家长（提要列表）不应该回应孩子的逻辑。like按钮组件应该维护自己的逻辑。但是我不知道如何封装它。
对LikeButton使用state，在addLike中使用setState。您仍然可以将按钮操作传递给父级，但正如您所说，like button组件应保持其自身的逻辑。
最好有一个共享的模型、可观察的或通量存储，子级可以触发操作/设置某些内容，父级可以接收它发生的事件