最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
![](https://img-blog.csdnimg.cn/img_convert/95dacfa76bfd55523651d2e25232d1e3.webp?x-oss-process=image/format,png)
-
创建一个所有菜品的展示页面,即Menu组件,将准备好的菜品数据传入
-
定义一个按标签过滤的过滤函数(使用filter),传递给Categories组件,由改组件调用过滤函数
-
定义一个存放菜品标签(去重后)的state,传入Categories组件,在该组件中动态生成菜品种类的按钮
-
点击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 (
美食菜单