基于React实现B站评论区

        今天继续来学习一下React，使用React实现B站评论区，如下图：

        在使用React开发类似B站评论区的功能时，我们需要考虑以下几个关键点来构建一个基本的评论系统：

1. 设计组件结构

首先，设计组件结构是关键。至少需要以下几种组件：

• CommentList: 负责展示评论列表。
• Comment: 单个评论项的展示，包括用户名、评论内容、时间戳等。
• CommentContent: 用户输入评论的内容，包括文本输入框和提交按钮。
• User: 当前的登录的用户
• TabList: 评论排序的导航类型

2. 管理状态

        使用React的状态管理功能（如useState或useReducer）来处理评论数据和表单输入状态。例如，可以创建一个状态来存储所有的评论数据，以及一个状态来管理评论表单的输入值。

3. 发送和获取评论

当然，本次实现不考虑连接后端，只利用假的数据来实现B站评论区的按照热度、事件排序展示、删除评论、发布评论。如果需要连接后端可以考虑下面你的操作：

获取评论:  如果评论数据来自后端API，可以使用fetch或第三方库如axios来获取数据，并在组件挂载时或根据需要触发请求。
发送评论: 当用户提交评论时，捕获表单数据并发送POST请求到后端API，成功后通常会刷新评论列表以显示新评论。
删除评论：当用户删除评论的时候，捕获评论Id并发送DELETE请求到后端API，后端根据ID删除该条评论。

4. 代码实现

import './App.scss'
import {useState} from "react";
import avatar1 from './images/1.png';
import avatar2 from './images/2.png';
import stukk from './images/lyy.jpg';

/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 * 3. 发布评论
 */

// 评论列表数据
const defaultList = [
    {
        // 评论id
        rpid: 3,
        // 用户信息
        user: {
            uid: '13258165',
            avatar: avatar1,
            uname: '周杰伦',
        },
        // 评论内容
        content: '哎哟，不错哦',
        // 评论时间
        ctime: '10-18 08:15',
        like: 98,
    },
    {
        rpid: 2,
        user: {
            uid: '36080105',
            avatar: avatar2,
            uname: '许嵩',
        },
        content: '我寻你千百度 日出到迟暮',
        ctime: '11-13 11:29',
        like: 88,
    },
    {
        rpid: 1,
        user: {
            uid: '30009257',
            avatar: stukk,
            uname: 'stu_kk',
        },