React中使用.map渲染数组时，如何为每个项设置样式并生成独立盒子

一、修改React代码（修复语法问题+拆分菜品结构） #

首先要注意React中需用className替代原生HTML的class，同时给每个菜单项添加独立容器类，并为map循环添加唯一key：

import data from "../data";
import "./Food.css"

const Food = () => {
    return (
        <div className="menu-section">
            <h2 className="section-title">Appetizers</h2>
            
            <div className="menu-container">
                {data.appetizers.map((food, index) => {
                    return (
                        <div key={index} className="food-item">                        
                            <div className="food-header">
                                <div className="food-name">{food.name}</div>
                                <div className="food-price">{food.price}</div>
                            </div>
                            <div className="food-description">{food.description}</div>
                            <div className="random-tag">{Math.floor(Math.random() * 10000)}</div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
};

export default Food;

二、编写CSS样式（实现参考图布局） #

通过Flex布局实现菜品名称与价格左右对齐，每个菜品作为独立盒子展示：

/* 菜单板块整体容器 */
.menu-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 板块标题样式 */
.section-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

/* 菜品列表容器 */
.menu-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 单个菜品独立盒子 */
.food-item {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 菜品名称+价格行 */
.food-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.food-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #222;
}

.food-price {
  font-size: 1rem;
  color: #666;
}

.food-description {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  margin-bottom: 5px;
}

.random-tag {
  font-size: 0.8rem;
  color: #999;
}

关键说明 #

• 每个菜单项通过.food-item类成为独立盒子，添加阴影、圆角增强视觉区分
• 用Flex布局的.food-header实现名称左对齐、价格右对齐的效果
• 菜单容器通过flex-direction: column和gap控制菜品垂直间距

内容的提问来源于stack exchange，提问作者Kozan Tys