我在用。map遍歷數組內部的數據。我想設計每一個& quot數據束& quot分開。我有多個部分(開胃菜，午餐等)，每個部分都有自己的項目。我如何將每個菜單項分離到它自己的盒子里。

import data from "../data";

導入& quot。/food . CSS & quot；

const Food =()= & gt；{

return (
    <div> <h2 class ="AppHead">Appetizers</h2>
    
    <div class = 'box'>
        {data.appetizers.map((food) => {
                return (

                    <div>                        
                    <div class ="">{food.name}</div>
                    {food.price}
                    {food.description}
                    {Math.floor(Math.random() * 10000)}
                    </div>
                )
        })}
    </div> </div>
);
    };

出口默認食品；

這是我想重新創(chuàng)造的 這是代碼

我想用CSS重新創(chuàng)建那個圖像。

然后在你的css文件中做任何你想要的樣式，它應該應用到每個渲染的菜單項。我認為這是你想要達到的目標。

這里有一個簡單的例子來說明如何做到這一點。您的父數據可能如下所示:

const data = {
  appetizers: [
    {
      id: 1,
      title: 'Fries',
      price: 2.99,
    },
    {
      id: 2,
      title: 'Mozzarella Sticks',
      price: 4.99,
    },
    {
      id: 3,
      title: 'Chicken Wings',
      price: 6.99,
    },
    {
      id: 4,
      title: 'Nachos',
      price: 5.99,
    },
    {
      id: 5,
      title: 'Spinach Artichoke Dip',
      price: 7.99,
    },
    {
      id: 6,
      title: 'Bruschetta',
      price: 3.99,
    },
  ],
  drinks: [
    {
      id: 1,
      title: 'Coke',
      price: 1.99,
    },
    // Add more drinks here
  ],
  // Add more subgroups here
};

理想情況下，我建議讓每個部分都成為自己的組成部分。所以你可以有一個用來傳遞數據的開胃菜組件。然后午餐、晚餐等也這樣做。

看起來大概是這樣的:

<Appetizers apps={data.appetizers} />
    <Lunch lunch={data.lunch} />
    <Drinks drinks={data.drinks} />