7. 组件的样式处理

7.1 组件基础样式方案

• 行内样式（不推荐）
• class类名控制

① 行内样式

• 第一个 {} 是一个语法， 第二个{} 是一个对象

② class类名控制

• index.css

• App.js

8. 案例：B站评论

8.1 B站评论案例

• 渲染评论列表
• 删除评论实现
• 渲染导航Tab和高亮实现
• 评论列表排序功能实现

8.2 渲染评论列表

• 使用useState维护评论列表
• 使用map方法对列表数据进行遍历渲染（别忘了加key）

评论列表数据：

① 使用useState维护评论列表

② 使用map方法对列表数据进行遍历渲染（别忘了加key）

8.3 实现评论删除

① 删除显示 - 条件渲染

• 当前用户的 uid 与 list 列表中的列表项的 uid 相同，则显示删除按钮

② 删除功能 - 拿到当前项id以id为条件对评论列表做filter过滤

8.4 渲染Tab+点击高亮实现

• 点击哪个tab项，哪个做高亮处理

• 点击谁就把谁的type（独一无二的标识）记录下来，然后和遍历时的每一项的type做匹配，谁匹配到就设置负责高亮的类名

导航 Tab 数据：

① 点击谁就把谁的 type 记录下来

② 通过记录的 type 和每一项遍历时的 type 做匹配，控制激活类名 active 的显示

③ 根据 type 类型进行排序列表

• hot ——根据点赞数排序

• time——根据创建时间排序

④ 使用 lodash 库实现排序功能

lodash 库官网：Lodash

• 下载
  • npm install lodash 或者 npm i lodash（不支持 yarn 安装）
• 引入：

  • import _ from 'lodash'

• _.orderBy(排序的对象或数组, 排序的条件, 升序排序/降序排序)方法，返回一个排序后的新数组

  • 升序排序/降序排序: asc/desc

8.5 classnames优化类名控制

classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示

• 下载：
  • npm install classnames
• 引入：
  • import classNames from 'classnames'

• className(静态的类名, {动态类名: 条件})
  • 动态类名 key 表示要控制的类名，value表示条件，true的时候类名显示