2024年最全React入门实战（四）美食清单(1)，2024年最新前端面试 webpack

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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}

)

})}

)

}

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】