react 0至1 案例

复制代码
/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 *  1.点击记录当前type
 *  2.通过记录type和当前list中的type 匹配
 */
javascript 复制代码
import './App.scss'
import avatar from './images/bozai.png'
import {useState} from "react";
/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 评论列表数据
const list = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar,
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟,不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar,
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '前端',
    },
    content: '123',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '前端',
}

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 *  1.点击记录当前type
 *  2.通过记录type和当前list中的type 匹配
 */
// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

const App = () => {
  // * 1)使用useState维护
  //  * 2)使用map方法对列表遍历
  const [commentList,setList] = useState(list)
  const [type,setType] = useState('hot')
  const handleTabChange = (type)=>{
    setType(type)
  }

  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名: active */}
            {tabs.map(item=>(
                <span key={item.type}
                      onClick={()=>handleTabChange(item.type)}
                      className={`nav-item ${type== item.type&&'active'}`}>{item.text}</span>
            ))}
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <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=""
            src={item.user.avatar}
            />
            </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>
      </div>
    </div>
  )
}

export default App
相关推荐
LuciferHuang2 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing2 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20152 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言3 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友5 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手5 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿5 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉