react 基本写法

1. 高亮字段 & classNames

需求:

点击哪个tab项,哪个做高亮处理

核心思路:

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

javascript 复制代码
// npm install classnames
import classNames from "classnames";

<li className="nav-sort">
    {/**高亮类名 active */}
    {
      tabs.map(item=>
      <span
       key={item.type}

       // 用useState记录点击的type
       // 因为要传参,所以onClick里面写箭头函数
       onClick={()=>handleTabChange(item.type)}
       className={`nav-item ${type === item.type && 'active'}`}

       // 下面是采用 classnames工具 写法
       className={classNames('nav-item', {active:type === item.type})}
       className={classNames('nav-item', type === item.type && 'active')}
       >
          {item.text}
      </span>
      )
     }
</li>

2. 删除评论功能

需求:

1.只有自己的评论才显示删除按钮

2.点击删除按钮,删除当前评论,列表中不再显示

核心思路:

1.删除显示-条件渲染

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

javascript 复制代码
      {/* 条件:user.id === item.user.id */}
      {user.uid === item.user.uid && (
        // onClick 写成箭头函数,因为要传参
        <span className="delete-btn" onClick={() => handleDel(item.rpid)}>
          删除
        </span>
      )}
javascript 复制代码
  // 渲染评论列表
  // 1. 使用 useState 维护 list
  const [commentList, setCommentList] = useState(list);

  // 删除功能
  const handleDel = (id) => {
    console.log(id);
    // 对 commentList 做过滤处理
    // filter不会改变原数组
    setCommentList(commentList.filter((item) => item.rpid !== id));
  };

3. uuid dayjs

4. 清空内容&聚焦实现

javascript 复制代码
// npm install uuid
import { v4 as uuidV4 } from "uuid";
// npm install dayjs
import dayjs from "dayjs";
javascript 复制代码
// 发表评论
const [content, setContent] = useState('')  
const inputRef = useRef(null)

const handlePublish = () => {
    setCommentList([
      ...commentList,
      {
        rpid: uuidV4(), // 随机id
        user: {
          uid: "007",
          Avatar,
          uname: "黑马前端",
        },
        content: content,
        ctime: dayjs(new Date()).format("MM-DD HH:mm"), // 格式化 月-日 时:分
        like: 60,
      },
    ]);
    
    // 1.清空输入框的内容
    setContent('')
    // 2. 重新聚焦
    inputRef.current.focus()
  };
html 复制代码
      <div>
        <textarea
          className="reply-box-textarea"
          placeholder="发一条友善的评论"
          ref={inputRef}
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        {/* 发布按钮 */}
        <div className="send-text" onClick={handlePublish}>
          发布
        </div>
      </div>

5. json-server

html 复制代码
npm install json-server

Create a db.json or db.json5 file

javascript 复制代码
{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

package.json

javascript 复制代码
"scripts":{
    "serve": "json-server db.json --port:3004"
}
javascript 复制代码
npm run serve

保持窗口不关闭

javascript 复制代码
  const [commentList, setCommentList] = useState([]);

  useEffect(() => {
    async function getList() {
      const res = await axios.get("http://localhost:3004/list");
      setCommentList(res.data);
    }
    getList();
  }, []);

6. 自定义 Hook 函数封装数据请求

一般思路:

(1)编写一个use打头的函数

(2)函数内部编写封装的逻辑

(3)return 出去组件中用到的状态和方法

(4)组件中调用函数解构赋值使用

javascript 复制代码
  // 封装请求数据的 hook
  function useGetList() {
    const [commentList, setCommentList] = useState([]);

    useEffect(() => {
      async function getList() {
        const res = await axios.get("http://localhost:3004/list");
        setCommentList(res.data);
      }
      getList();
    }, []);
    
    return {
      commentList,
      setCommentList,
    };
  }

调用

javascript 复制代码
const { commentList, setCommentList } = useGetList();

7. 数据格式清洗

javascript 复制代码
const menus = foodList.map((item) => ({ tag: item.tag, name: item.name }));

foodList 数组中提取每个元素的 tagname 字段,组成一个新的数组 menus ,其中每一项是一个只包含 tagname 的对象。

javascript 复制代码
const foodList = [
  { tag: "fruit", name: "Apple", price: 10 },
  { tag: "drink", name: "Cola", price: 5 },
  { tag: "dessert", name: "Cake", price: 15 }
];

// 得到的新数组 menus 是:
[
  { tag: "fruit", name: "Apple" },
  { tag: "drink", name: "Cola" },
  { tag: "dessert", name: "Cake" }
]

8. 外卖商品列表切换显示

条件渲染:控制对应项显示

activeIndex === index && 视图 (没有滑动效果,只有点击跳转)

javascript 复制代码
      {/* 外卖商品列表 */}
      {foodsList.map((item, index) => {
        return (
          activeIndex === index && (
            <FoodsCategory
              key={item.tag}
              // 列表标题
              name={item.name}
              // 列表商品
              foods={item.foods}
            />
          )
        );
      })}

9. 购物车商品 总价计算

javascript 复制代码
const totalprice = cartList.reduce((a, c) => a + c.price * c.quantity, 0);

保留两位小数

javascript 复制代码
{totalPrice.toFixed(2)}
相关推荐
Sun_light12 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子14 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000015 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心15 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm20 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v24 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
Bug退退退12325 分钟前
RabbitMQ 高级特性之重试机制
java·分布式·spring·rabbitmq
小皮侠26 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue27 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷32 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js