React,来个小案例总结一下

上集精彩

回顾上集:

上集俺讲到了Zustand的使用。

本集继续

😁😁😁,老铁们,俺又来继续唠叨了,别嫌俺烦哈,俺尽量少烦点

美团案例

静态页面不想一步步来的话,可以下载源码:链接:pan.baidu.com/s/1v7ZRxHBb...;

  • 下载其他的所需依赖:有不知道的可上网查
cmd 复制代码
npm i axios json-server lodash zustand
  • 添加虚拟服务指令:
json 复制代码
"scripts": {
    "serve": "json-server --watch server/data.json --port 3001"
  },

展示商品列表

  • 状态管理 zustand
cmd 复制代码
npm install immer

在App.js中引入并log下,看看效果:能行😎(下图商品列表是死数据)

  • 启动服务:
cmd 复制代码
npm run serve
  • 展示列表:将 foodsList替换为 categories

左侧菜单

  • 菜单组件 Menu ,由于右侧已经获得到了列表数据,就不用再菜单组件 Menu 中再获取重新获取一次了,会给后台服务造成负担的,可以通过父传子组件通信来传递给菜单组件 Menu 值:
  • 状态管理菜单激活值activeIndex,并定义一个点击菜单项时该值会发生变化的动作:
  • 在Menu组件中添加下图两段代码:

点击各个菜单项后,控制台会输出相应的index值,并且同步持久化。

  • 动态更新菜单项类名样式:判断activeIndex是否等于当前的index:
js 复制代码
// Menu/index.js
className={classNames(
              "list-menu-item",
              activeIndex === index && "active"
            )}
  • 将持久化存储修改下,只存储菜单激活 activeIndex
js 复制代码
// store/modules/categorySlice.js
{
          name: "categorySlice",
          partialize: (state) => ({ activeIndex: state.activeIndex }),
          storage: createJSONStorage(() => sessionStorage)
        }
  • 菜单项对应的商品列表切换显示:如果activeIndex === index && 商品列表视图:

添加购物车实现

  • 点击 + 号添加当前商品到购物车列表中,需要对购物车列表进行状态管理:
  • 在FoodItem组件中的加号添加点击事件:

购物车数量和总价显示

  • 计算总价price*count:
  • 购物车高亮显示:
  • 结算起送判断:

购物车列表实现

  • 购物车列表渲染:直接把cart改为carts就行了,再添加个类名visible
  • 修改carts里的count:添加增和减的操作,还有清空的操作
  • 显示和隐藏购物车:点击购物车显示购物车列表,点击遮罩层隐藏购物车列表
js 复制代码
// Cart/index.js
// 控制购物车显示与隐藏
  const [visible, setVisible] = useState(false);

{/* 遮罩层 添加visible类名可以显示出来 */}
      <div
        className={classNames("cartOverlay", visible && "visible")}
        onClick={() => setVisible(false)}
      />

{/* 购物车数量 */}
        <div
          onClick={() => setVisible(true)}
          className={classNames("icon", carts.length > 0 && "fill")}
        >
                     
{/* 添加visible类名 div会显示出来 */}
      <div className={classNames("cartPanel", visible && "visible")}>

下集精彩

好了,完事,歇歇了😫

下篇俺会讲到哪些知识点呢: 如有不当的地方,原谅解。只要懂得这篇的知识点就很棒了。

  • React Router;
  • CSS Module;
相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb5 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
hunter2062065 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb5 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角5 小时前
CSS 颜色
前端·css
浪浪山小白兔7 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
光头程序员7 小时前
grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下
javascript·react.js·ecmascript
limit for me7 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架