React.js：如何在餐厅网站组件中按分类渲染菜单数组数据？

1. 父组件：按分类分组数据并动态渲染CardMenu #

先在父组件中把原始菜品数据按group字段分组，再为每个分类动态渲染对应的CardMenu组件，同时传递该分类的菜品数据和分类名称。

修改后的父组件代码：

import React from "react";
import CardMenu from "./CardMenu";

const CardData = [
  {
    index: 1,
    imagesrc: "assets/menu/nonveg/tandoori-chicken.jpeg",
    title: "Tandoori Chicken",
    group: "non-veg",
    discprice: 400,
    price: 450,
  },
  {
    index: 2,
    imagesrc: "assets/menu/veg/steamed-momos.jpeg",
    title: "Momos Steamed",
    group: "veg",
    discprice: 80,
    price: 100,
  },
  {
    index: 3,
    imagesrc: "assets/menu/nonveg/fried-nonveg-momos.jpeg",
    title: "Non-Veg Momos Fried",
    group: "non-veg",
    discprice: 100,
    price: 150,
  }
];

const Menu = () => {
  // 按group字段分组菜品数据
  const groupedData = CardData.reduce((acc, item) => {
    const group = item.group;
    if (!acc[group]) {
      acc[group] = [];
    }
    acc[group].push(item);
    return acc;
  }, {});

  return (
    <div className="group">
      <h1>Our Collection</h1>
      {/* 遍历分组后的分类，渲染对应CardMenu */}
      {Object.entries(groupedData).map(([category, items]) => (
        <CardMenu 
          key={category} 
          menudata={items} 
          category={category} 
        />
      ))}
    </div>
  );
};

export default Menu;

2. 子组件：修正错误并动态渲染内容 #

子组件需要接收分类名称传递给Tag组件，修正字段拼写错误，同时使用菜品自身的图片路径，添加空数据处理避免报错。

修改后的子组件代码：

import Tag from "./Tag";

const CardMenu = ({ menudata, category }) => {
  // 处理空数据场景
  if (!menudata || menudata.length === 0) {
    return <div className="menu">No items in this category</div>;
  }

  return (
    <div className="menu">
      {/* 将分类名称传给Tag组件 */}
      <Tag label={category} />
      <div className="scroll-menu">
        {menudata.map((curElem) => {
          const { index, title, imagesrc, price, discprice } = curElem;
          return (
            <div className="card" key={index}>
              <div className="card-upper">
                <div className="card-image">
                  {/* 使用菜品自身的图片路径 */}
                  <img
                    src={require(`../${imagesrc}`)}
                    alt={title}
                  />
                </div>
                <div className="card-info">{index}</div>
              </div>
              <div className="card-mid">
                <div className="card-title">{title}</div>
                <div className="card-icons"></div>
                <div className="card-desc">
                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                  Aliquam, vero. Provident nesciunt magni aliquid omnis eveniet
                  architecto optio reprehenderit at itaque aut?
                </div>
              </div>
              <div className="card-bottom">
                <div className="card-price">${price}</div>
                <div className="card-descprice">${discprice}</div>
                <div className="card-button">
                  <button>Order</button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CardMenu;

3. Tag组件（补充） #

如果Tag组件需要显示分类名称，需接收label属性并渲染：

const Tag = ({ label }) => {
  // 首字母大写优化显示
  const formattedLabel = label.charAt(0).toUpperCase() + label.slice(1);
  return <div className="tag">{formattedLabel}</div>;
};

export default Tag;

关键修改说明 #

• 数据分组：用reduce方法自动按分类分组，避免手动重复编写CardMenu组件。
• 动态传参：父组件向子组件传递分类菜品数据和分类名称，实现组件复用。
• 字段修正：将子组件中的disprice改为正确的discprice，避免渲染错误。
• 图片路径优化：替换硬编码的图片路径，使用菜品数据中的imagesrc确保显示对应图片。
• 空数据处理：添加判断逻辑，防止空数组调用map方法报错。

内容的提问来源于stack exchange，提问作者Aman Choudhary