實現功能

1、渲染評論列表
2、刪除評論
3、渲染導航欄和高亮
4、評論列表排序功能
5、獲取評論
6、點擊發布按鈕發布評論
7、清空輸入框
8、重新聚焦

實現代碼

1、需要引入

import React, { useRef, useState } from 'react'
import avatar from "../logo.png" //頭像
import "./css/index.css" //樣式

2、樣式----[./css/index.css]

* {margin: 0;padding: 0;
}.comment-box {width: 1000px;margin: 20px auto;height: 200px;
}/* 導航欄 */
.comment-tabs {display: flex;align-items: end;font-weight: normal;margin-bottom: 20px;
}.tabs-left {margin-right: 20px;font-size: 14px;
}.tabs-left p span {margin-left: 6px;color: #666;font-size: 10px;
}.tabs-right {display: flex;color: #666;font-size: 10px;
}.tabs-right .active {color: #08a17d;font-weight: 500;
}.tabs-right div span {display: inline-block;margin: 0 6px;height: 6px;border-left: 1px solid #666;
}.tabs-right div:last-child span {border: none;
}/* 發表評論 */
.comment-send {display: flex;align-items: center;justify-content: space-between;height: 40px;
}.avatar {width: 35px;height: 35px;margin-left: 10px;overflow: hidden;border-radius: 35px;border: 1px solid #08a17d;
}.avatar img {width: 100%;height: 100%;
}.comment-send .content {flex: 1;margin: 0 10px;padding: 0 10px;height: 100%;line-height: 40px;border: none;background: #eee;border-radius: 4px;border: 1px solid #eee;
}.comment-send .content:hover {background: none;
}.comment-send .button {width: 80px;height: 100%;color: #fff;text-align: center;line-height: 40px;background: #08a17d;border-radius: 4px;
}.comment-send .button:hover {cursor: pointer;
}/* 評論列表 */
.comment-list {margin-top: 20px;
}.comment-item {display: flex;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #eee;
}.comment-item .right {flex: 1;margin-left: 10px;font-size: 10px;color: #666;line-height: 20px;
}.comment-item .right .content {color: #000;font-weight: 500;font-size: 12px;
}.comment-item .right .like {margin: 0 10px;
}.comment-item .right .delete:hover {cursor: pointer;
}

3、數據

// 當前用戶數據
const user = {uid: "10009",avatar,uname: "jock"
}// 導航
const tabs = [{name: "最新",id: 1},{name: "最熱",id: 2},
]
// 評論列表
const comment_list = [{id: "1",content: "真不錯",time: "2020/1/1 12:00:00",like: 1,user: {uid: "10029",avatar,uname: "jock"}},{id: "2",content: "沒毛病",time: "2020/11/01 12:00:00",like: 3,user: {uid: "10009",avatar,uname: "jock"}},{id: "3",content: "真棒",time: "2020/8/21 12:00:00",like: 10,user: {uid: "10008",avatar,uname: "alen"}},
]

4、邏輯處理

export default function Comment() {const [list, setList] = useState(comment_list.sort((a, b) => new Date(b.time) - new Date(a.time)));const [type, setType] = useState(1);const [content, setContent] = useState("");const inputRef = useRef();// tab切換const handleChange = (id) => {setType(id)if (id === 1) {setList(list.sort((a, b) => new Date(b.time) - new Date(a.time)))} else {setList(list.sort((a, b) => b.like - a.like))}}//發布const handleSend = () => {setList([...list, {id: Math.random().toString().slice(2),content,time: new Date().toLocaleString(),like: 0,user}])setContent("");inputRef.current.focus();}// 刪除const handleDel = (id) => {setList(list.filter(item => item.id !== id))}return (<div className='comment-box'>{/* 導航欄 */}<div className='comment-tabs'><div className='tabs-left'><p>評論<span>{list.length}</span></p></div><div className='tabs-right'>{tabs.map(item =><div key={item.id} onClick={() => handleChange(item.id)} className={item.id === type ? 'active' : ''}>{item.name} <span></span></div>)}</div></div><div className='comment-wrap'>{/* 發表評論 */}<div className='comment-send'><div className='avatar'><img src={user.avatar} alt='' /></div><textarea className='content' ref={inputRef} value={content} onChange={(e) => setContent(e.target.value)} placeholder='下面我簡單說兩句' /><div className='button' onClick={() => handleSend()}>發布</div></div>{/* 評論列表 */}<div className='comment-list'>{list.map(item =><div className='comment-item' key={item.id}><div className='avatar'><img src={item.user.avatar} alt='' /></div><div className='right'><p className='username'>{item.user.uname}</p><p className='content'>{item.content}</p><p><span className='time'>{item.time}</span><span className='like'>點贊數: {item.like}</span>{item.user.uid === user.uid && <span className='delete' onClick={() => handleDel(item.id)}>刪除</span>}</p></div></div>)}</div></div></div>)
}