Question

我有一个Feed列表，它将Feed对象作为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
    ...
}

这是带有类似按钮的Feed组件

//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>
}

当＆＃34;喜欢＆＃34;单击按钮，active类将添加到按钮。

但是所有Feed都是由静态props从上到下呈现的。我是否必须从下到上触发回调才能进行此更改？

我不认为父母（饲料清单）应该回应孩子的逻辑。 like按钮组件应该保持自己的逻辑。但我不知道如何封装它。

Answer 1

对LikeButton使用state，在addLike中使用setState。您仍然可以将按钮操作传递给父级，但就像您说类似按钮组件应保持其自己的逻辑。

如何实施＆＃39;喜欢＆＃39; React.js

1 个答案: