反应对象呈现到fontawesome

Question

我如何将对象呈现到字体上很棒的组件。我有一个具有不同属性的对象，并且将它们动态地渲染到我的卡片组件中，因此我有许多具有不同内容的卡。以下是我的代码。

import React from "react";
import "../Styles/card.css";
import "bootstrap/dist/css/bootstrap.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCar, faTruck, faHome } from "@fortawesome/free-solid-svg-icons";

const Card = () => {
 const Cards = [
    {
      _uid: "BUY6Drn9e1",
      Icon: "faHome",
      head: "Free and Fast",
      text: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam 
tempora illum magni minima dolor id sequi quibusdam omnis.",
},
{
  _uid: "BUY6Drn9e1",
  Icon: "faTruck",
  head: "Post Transportation",
  text: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora illum magni minima dolor id sequi quibusdam omnis.",
},
{
  _uid: "BUY6Drn9e1",
  Icon: "faCar",
  head: "Free and Fast",
  text: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora illum magni minima dolor id sequi quibusdam omnis.",
},
  ];

  const renderCard = (Card, index) => {
const shape = Card.Icon;
console.log(shape);
return (
  <div className="card carded col mx-1 mb-2" key={index}>
    <div className="flex">
      <div className=" sameRow icon">
        {/* <i class="bi bi-truck" style={{ fontSize: 35 }}></i> */}
      </div>
      <div className="sameRow body">
        <FontAwesomeIcon
          icon={faCar}
          className="pic"
          style={{ fontSize: 25, color: "#66b2e9" }}
        />
        <h3 className="head">{Card.head}</h3>
        <p className="text">{Card.text}</p>
      </div>
    </div>
  </div>
);
};

  return <div className="row mt-5 pt-5 px-5">{Cards.map(renderCard)}</div>;
};
export default Card; 

我试图用{card.icon}替换面部。}

Answer 1

您犯了一个错误，

1. 使用导入名称而不是字符串将字体真棒图标链接到每个项目。

  const Cards = [
    {
      _uid: "BUY6Drn9e1",
      Icon: faHome,
      head: "Free and Fast",
      text:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora illum magni minima dolor id sequi quibusdam omnis."
    },
    {
      _uid: "BUY6Drn9e1",
      Icon: faTruck,
      head: "Post Transportation",
      text:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora illum magni minima dolor id sequi quibusdam omnis."
    },
    {
      _uid: "BUY6Drn9e1",
      Icon: faCar,
      head: "Free and Fast",
      text:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora illum magni minima dolor id sequi quibusdam omnis."
    }
  ];

2. 像您对文本一样迭代时访问它

...
           <FontAwesomeIcon
              icon={Card.Icon}
              className="pic"
              style={{ fontSize: 25, color: "#66b2e9" }}
            />
...