如何修复我的卡片组件以在 Flex 中显示

Question

我目前正在学习react。我有一个 new_card_component.js 文件，用于显示从 data.js 文件读取的数据。然而，在index.js 文件中提供的airbnb.js 文件中，我将AirbnbApp 模块传递到名为

data-container

的部分，该部分具有flex 属性，但是这些不会在flex 中显示卡片组件。 我的 AirBnB.js 文件：

import "../CSS/airbnb.css";
import AirbnbApp from "./airbnbApp";

function AirBnBPage(){
    return (
        <div>
            <NavBar/>
            <Hero/>
            <section className="data-container">
                <AirbnbApp/>
            </section>
        </div>
    )
}
export default AirBnBPage

我的 new_card_component.js 文件：

import { FaStar } from "react-icons/fa6";
import "../CSS/airbnb.css";

function NewCard(prop){
    return (
        <div className="card-sub">
            <img src={prop.mainimage} alt="trainer"/>
            <div className="info-group">
                <a href="https://"><FaStar/> {prop.rating} ({prop.review})</a>
                <p>{prop.country}</p>
            </div>  
            <p>{prop.message}</p>
            <div className="info-group">
                <p>Available spots : {prop.spots}   Price : {prop.cost} $</p>
            </div>
        </div>
    )
}

我的CSS文件：airbnb.css

.data-container{
    /* background-color: red; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:1200px;
    margin:0 auto;
    align-items: center;
    justify-content:flex-start;
}
.card-sub{
    margin:25px 0 0;
    width:320px;
    border:2px solid black;
}
.card-sub img{  
    width:220px;
    height: 300px;
    border-radius: 10px;
}
.info-group{
    margin-top:10px;
    display: flex;
    gap:0.7rem;
    margin-left:10px;
}

我尝试将

display:flex

属性应用于数据容器部分，但是这些并没有解决我的问题。它仍然在自己的行上显示卡片组件，假设我的 data.js 文件有一个内部有 4 个对象的数组，它将在自己的行上显示 4 个卡片组件。

Answer 1

问题实际上出在您从问题中删除的文件中，呵呵，很好，我之前看过。

在 AirbnbApp.js 中直接返回 cardElements，而不是在 div 内。在直接子项上显示 Flex 工作，如果您将 div 包裹起来，则该 div 将成为直接子项

       }].map(function (cardItem) {
            return <NewCard mainimage={cardItem.coverImage} rating={cardItem.stats.rating} country={cardItem.location} message={cardItem.description} cost={cardItem.price} spots={cardItem.openSpots} review={cardItem.stats.reviewCount} />
        })

    return cardElements;
}