React入门实战（四）美食清单

| category | 菜品分类 |

| price | 菜品价格 |

| img | 菜品图片 |

| desc | 菜品描述 |

思路整理

1. 创建一个所有菜品的展示页面，即Menu组件，将准备好的菜品数据传入

2. 定义一个按标签过滤的过滤函数（使用filter），传递给Categories组件，由改组件调用过滤函数

3. 定义一个存放菜品标签（去重后）的state，传入Categories组件，在该组件中动态生成菜品种类的按钮

4. 点击Categories组件中的菜品按钮，筛选出该类别的菜品并展示

代码：

第一步：先准备一下数据，考虑到篇幅，此处仅列举一个

const menu = [

{

id:1,

title:‘小龙虾’,

category:“夜宵”,

price:“￥50”,

img:“./imgs/1.jpg”,

desc:“Wish you a good mood every day, eat well and drink well”

}

]

export default menu;

第二步：做一个简单的页面，展示所有的菜品

import React from ‘react’

// Menu.js

const Menu = ({ menuItems }) => {

return (

// 显示菜品及信息

{menuItems.map((item) => {

const { id, img, price, title, desc } = item;

return (

{title}

{price}

{desc}

)

})}

)

}

export default Menu;

在主组件中引入这个展示菜品的组件Menu.js

import React, { useState } from ‘react’

import items from ‘./data’ // 准备的数据

import Menu from ‘./components/Menu’

function App() {

// 初始化菜品列表，传入菜品数据

const [menuItems, setMenuitems] = useState(items);

return (

美食菜单

);

}

export default App;

第三步：添加可点击的标签按钮，点击某个标签就展示某种菜品

定义好实现该功能的函数filterCategories

// App.js

// 获取所有菜品的标签并去重，加入"所有"选项，代表所有菜品

const allCategories = [“所有”, …new Set(items.map(item => item.category))];

console.log(allCategories); // [“all”, “夜宵”, “饮品”, “甜品”]

// 过滤函数，当点击某一标签按钮时，只展示该种类菜品

const filterCategories = (category) => {

if (category === ‘所有’) {

setMenuitems(items);

}

else {

let newItem = items.filter(item => item.category === category);

setMenuitems(newItem)

console.log(‘menuItems’, menuItems)

}

}

// 在页面中使用分类标签组件，实现点击某标签就展示该种类菜品的功能

return (

美食菜单

);

在Categories组件中调用

import React,{useState} from ‘react’

const Categories = ({ filterCategories, categories }) => {

// 初始化state，用于标记某标签是否被点击

const [flag, setFlag] = useState([0,0,0,0])

return (

{categories.map((ctg, i) => {

console.log(ctg,i)

// 绑定点击事件，当点击该标签时，调用过滤函数，将该标签的标签值传递给过滤函数

return (

<button className={filter-btn ${flag[i]? 'active': null}} key={i}

onClick={(e) => {

filterCategories(ctg);

// 当前标签被点击，其他标签取消点击

let newFlag = [0,0,0,0];

newFlag[i] = 1;

setFlag(newFlag);

}} >

{ctg}

)

})}

)

}

export default Categories;

其中，值得一提的是“标签切换”功能的实现

1. 我定义了一个数组flag，用于标识四个标签中被点击的那个标签。

2. 由于同一时间段只能有一个标签被点击，另一个被点击时，前一个被点击的样式就需要取消掉，因此，当监听到某个标签被点击时，我直接把flag清空，并把当前标签的index值置为true (1)
   自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

[外链图片转存中…(img-YQP3paCO-1713553128412)]

[外链图片转存中…(img-UnCRzbZQ-1713553128412)]