当我在reactjs中映射对象数组时，为什么显示网格或flex不起作用

Question

当我在 React 中映射对象数组时，显示 Grid 或 Flex 不起作用。 这是下面的示例

这就是我所期望的：

这就是我所做的！

我希望能够将它们显示在行中而不是列中。当我在没有映射或对象的情况下对它们进行硬编码时，它们工作得很好，但是当我通过它们进行映射时，Flex 停止工作并进入一列。请帮助我，这对我来说非常重要。有趣的是，我在这个特定项目上以相同的方式做了一些部分，并且它们起作用了，但在这里，它不起作用。请帮我。谢谢你。

下面是组件本身。

import React from "react";

const FacilityCardBody = (props) => {
  return (
    <div>
      <div className="cards-body">
        <div className="cards-content d-flex align-items-start justify-content-center">
          {props.icon}
          <div className="cards-texts ms-4">
            <p className="lang-typeface mb-0">{props.title}</p>
            <p>{props.details}</p>
            {props.actionBtn}
          </div>
        </div>
      </div>
    </div>
  );
};

export default FacilityCardBody;

这是我使用地图功能进行映射的地方。

import React from "react";
import "./Facilities.css";
import FacilityCardBody from "./FacilityCardBody";
import facilityDetails from "./fCardBody";

const createFacilityCard = (facilityDetail) => {
  return (
    <FacilityCardBody
      icon={facilityDetail.icon}
      title={facilityDetail.title}
      details={facilityDetail.details}
      actionBtn={facilityDetail.actionBtn}
    />
  );
};

const Facilities = () => {
  return (
    <div>
      <div className="f-container">
        <div className="f-header">
          <h1>Our Services</h1>
          {/* <p>
            Sint sint laborum non cupidatat laborum ullamco consequat anim
            dolore laborum sint eiusmod ex et.
          </p> */}
        </div>
        {facilityDetails.map(createFacilityCard)}
      </div>
    </div>
  );
};

export default Facilities;

这是数组对象

import FacilityActionButton from "./FacilityActionButton";

const icon = [
  <i className="fa-solid fa-building-columns"></i>,
  <i className="fa-solid fa-wallet"></i>,
  <i className="fa-solid fa-book-open"></i>,
  <i className="fa-solid fa-house"></i>,
  <i className="fa-solid fa-file"></i>,
  <i className="fa-solid fa-id-card"></i>,
];
const actionBtn = <FacilityActionButton />;

const facilityDetails = [
  {
    id: 1,
    icon: icon[0],
    title: "Find Colleges Abroad",
    details:
      "Our seamless process helps you find schools that match with all your requirements ranging from type of degree, field of study, financial budget etc. Yes we can help if you need full financial assistance to fund your degree!",
    actionBtn: actionBtn,
  },
  {
    id: 2,
    icon: icon[1],
    title: "Access to Scholarships",
    details:
      "Whether you are in search of an academic or athletic scholarship, Glofi can help identify potential scholarships to match your financial budget.",
    actionBtn: actionBtn,
  },
  {
    id: 3,
    icon: icon[2],
    title: "Mentorship",
    details:
      "Glofi members get access to mentors who have been in your position and can provide valuable advice.",
    actionBtn: actionBtn,
  },
  {
    id: 4,
    icon: icon[3],
    title: "Housing and Accommodation",
    details:
      "Once you have gotten your admission and visa, Glofi can assist with options of housing and accommodation arrangements.",
    actionBtn: actionBtn,
  },
  {
    id: 5,
    icon: icon[4],
    title: "Test Registration & Preparation",
    details:
      "Glofi provides members with a tailored and self paced learning curriculum for all testing requirements eg SAT, GRE, TOEFL. These classes are taught by some of the best test prep instructors in the world.",
    actionBtn: actionBtn,
  },
  {
    id: 6,
    icon: icon[5],
    title: "Visa Assistance",
    details:
      "Upon admission, we will work with you to make sure you are well prepared to obtain your student visa.",
    actionBtn: actionBtn,
  },
];

export default facilityDetails;

这是CSS文件

.f-container {
    padding: 8rem;
}

.f-header {
    text-align: center
}

.cards-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 5rem;
}

.cards-content > i {
    border-radius: 40px;
    background: var(--icon-bg-linear);
    padding: 15px;
    color: var(--white-color);
}

@media screen and (max-width: 1150px) {
    .f-container {
        padding: 2rem 5rem;
    }
}

@media screen and (max-width: 995px) {
    .cards-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 650px) {
    .f-container {
        padding: 2rem;
    }

    .cards-body {
        grid-template-columns: repeat(1, 1fr);
    }
}

Answer 1

显示必须应用于父元素的 flex 和 grid。

您需要将

f-header

元素移到

f-container

之外：

const Facilities = () => {
    return (
        <div>
            <div className="f-header">
                <h1>Our Services</h1>
                <p>
                    Sint sint laborum non cupidatat laborum ullamco consequat anim
                    dolore laborum sint eiusmod ex et.
                </p>
            </div>
            <div className="f-container">
                {facilityDetails.map(createFacilityCard)}
            </div>
        </div>
    );
};

export default Facilities;

将 css 网格从

.cards-body

移动到

.f-container

:

.f-container {
  padding: 8rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5rem;
}

并在媒体查询中将

.cards-body

更改为

.f-container

。

Answer 2

您必须将样式（显示弹性）赋予包含组件的 div（卡片），如下所示：

import Nav from "./components/Nav";
import Header from "./components/Header";
import About from "./components/About";
import Cards from "./components/Cards";
import Footer from "./components/Footer";
import {data} from './data.js'

function App() {

  const dataShow = data.map((el)=> <Cards title={el.title} desc={el.desc}  />)

  return (
    <div className="App">
        <Nav/>
        <div className="cards">{dataShow}</div>
        <Header/>
        <About/>
        <Footer/>
    </div>
  );
}

export default App;