1.1列表渲染评论列表

效果演示

思路

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{/* 评论列表 */}
       <div className="reply-list">
         {/* 评论项 */}
         {commentList.map(item =>( 
           <div key={item.rpid} className="reply-item">
           {/* 头像 */}
           <div className="root-reply-avatar">
             <div className="bili-avatar">
               <img
                 className="bili-avatar-img"
                 alt=""
               />
             </div>
           </div>

           <div className="content-wrap">
             {/* 用户名 */}
             <div className="user-info">
               <div className="user-name">{item.user.uname}</div>
             </div>
             {/* 评论内容 */}
             <div className="root-reply">
               <span className="reply-content">{item.content}</span>
               <div className="reply-info">
                 {/* 评论时间 */}
                 <span className="reply-time">{item.ctime}</span>
                 {/* 评论数量 */}
                 <span className="reply-time">{item.like}</span>
                 <span className="delete-btn">
                   删除
                 </span>

               </div>
             </div>
           </div>
         </div>
       ))}
        
       </div>

1.2实现评论删除

需求

思路

代码实现

功能1：

1
2
3
{user.uid === item.user.uid && <span className="delete-btn" onClick={()=>deleteComment(item.rpid)}>
                   删除
            </span>}

功能2：

1
2
3
4
5
6
7
8
9
10
// 箭头函数传参
onClick={()=>deleteComment(item.rpid)}

// 删除
  const deleteComment =(id)=>{
    // 对commentList做过滤处理
    setCommentList(commentList.filter(item => item.rpid !== id))
  }