Html 如何将结果排序为一行？

我试图使用flexbox在React/JavaScript中并排显示三行结果。由于我只有一个CardItem，我无法复制并粘贴它三次，因为它将在一行中显示相同的结果。有没有办法在不复制和粘贴同一张卡片的情况下连续显示我的结果

代码如下：

  return (
          <div className="cards">
            <div className="cards__container">
              <div className="cards__wrapper">
                <ul className="cards__items">
                  <CardItem
                    src={restaurant.imageURL}
                    restaurantName={restaurant.name}
                    openingHours={restaurant.openingHours}
                    vibes={restaurant.vibes}
                    cuisine={restaurant.cuisine}
                    location={restaurant.area}
                    address={restaurant.address}
                    phone={restaurant.phone}
                  />
                </ul>
              </div>
            </div>
          </div>
        );

---

目前看起来是这样的：

为您的

文件制作一个单独的组件，并在任何地方使用它

    const cardComponent = (props) => {
           //your cardItem here
    }

现在把它们当作

{cardComponent()}

为了更好地理解，更喜欢这篇文章。
const resturants=[{…}，{…}]//餐厅对象数组
      const resturants = [{...}, {...}] // Restaurant Object Array
    
      const CardItem = ({restaurant}) => {
        // Implementation
      }
          
      return (
        <div>
          {resturants.forEach(item => (<CardItem restaurant={item}>))}
        </div>
      )

const CardItem=（{restaurant}）=>{
//实施
}
返回(
{resturants.forEach（item=>（））}
)

排序
resturants
数组将更改渲染顺序
映射一个数据数组，并为数组中的每个对象返回一张卡
      const resturants = [{...}, {...}] // Restaurant Object Array
    
      const CardItem = ({restaurant}) => {
        // Implementation
      }
          
      return (
        <div>
          {resturants.forEach(item => (<CardItem restaurant={item}>))}
        </div>
      )