我已经建立了多种多样的社交网络关系。我面临的问题是创建一个单一的图标,可以检测用户是否已经连接,如果他们是跟随图标,则应改为跟随图标。
这是一段代码,用于决定是否呈现哪种类型的图标(跟随者或跟随者)。
ConnectionHandle(Array, _id){
return Array.map(function(el, index){
console.log('chicken');
if(el === User_id){
return(
<div className="btn btn-warning" onClick={() => this.props.disconnectUser({id: _id})}>- user</div>
);
} else {
return (
<div className="btn btn-info" onClick={() => this.props.connectUser({id: _id})}>+ user</div>
);
}
},this);
};
以上代码将位于以下列表中:
return this.props.users.map(function(el, index){
return (
<li className="list-group-item" key={ index }>
<Link to={`/users/${el._id}`} activeClassName="active">
{el.email}
<div className="pull-sm-right">Join on {this.joinDate(el.createdAt)}</div>
{this.entryNum(el.entries.length)}
{this.userNum(el.followers.length)}
<div>{el.follow.length} follows</div>
</Link>
{this.ConnectionHandle(el.followers, el._id)}
</li>
)
}, this)
}
后端是用postman测试的,它在建立多对多关系时按预期工作。他们的关系也将用生命周期方法更新。
我只需要丢失的部分将图标从后面转换为后续,反之亦然。