如何在React卡片组件中正确添加react-icons图标？

我正在寻找react-icons在React卡片组件中的使用示例。尝试将图标作为props传入但未显示，也尝试将<BsFillBagPlusFill />嵌套在<Cards>组件中，以下是我的CardsUI和CardsDeck代码，请问正确的添加方式是什么？我是新手，感谢解答。

我的代码 #

Card UI 文件 #

import "../card-style.css";

const Cards = props =>{
    
    return (
        <div className="card text-center">
        <div className="overflow">
          <img
            src={props.imgsrc}
            alt={props.alt}
            className="card-img-top"
            icon={props.icon}
            />
          <a className="card-link">
            <span className="card-icon">
              
            <div className="card-body text-dark">
            <h4 className="card-title">{props.title}</h4>
          </div>
            </span>
          </a>
        </div>
      </div>
)
    
} 

export default Cards;

CardsDeck 组件 #

import React from "react";
import "../card-style.css";
import Cards from "./CardsUI";
import logo from "../img/logo.png";
import create from "../img/create.png"
import { BsFillBagPlusFill } from 'react-icons/bs';
import executive from "../img/executive.png"
import operational from "../img/operations.jpg"

export default function CardsDeck() {
    const link1 = "Create Request";
    const link2 = "Executive Dashboard";
    const link3 = "Operational Dashboard";
    return (
      <div className="container-fluid d-flex justify-content-center">
        <div className="row">
          <div className="col-md-4">
            <Cards title={link1} imgsrc={create}/>
          </div>
          <div className="col-md-4">
            <Cards title={link2}>
              <BsFillBagPlusFill />
            </Cards>
          </div>
          <div className="col-md-4">
            <Cards imgsrc={operational} title={link3} />
          </div>
        </div>
      </div>
    )
}

解决方案 #

问题核心是你的Cards组件没有渲染传入的图标——不管是props传递还是嵌套的子元素，都没在组件JSX里输出。下面提供两种可行的实现方式：

方法1：通过children渲染嵌套图标 #

你已经尝试了把图标嵌套在Cards组件里，只需在CardsUI中添加{props.children}来渲染传入的子元素即可：

import "../card-style.css";

const Cards = props =>{
    
    return (
        <div className="card text-center">
        <div className="overflow">
          {/* 条件渲染图片，避免无图片时出现空标签 */}
          {props.imgsrc && <img
            src={props.imgsrc}
            alt={props.alt || props.title}
            className="card-img-top"
            />}
          <a className="card-link">
            <span className="card-icon">
              {/* 渲染嵌套的图标 */}
              {props.children}
            </span>
          </a>
          <div className="card-body text-dark">
            <h4 className="card-title">{props.title}</h4>
          </div>
        </div>
      </div>
)
    
} 

export default Cards;

修改后，你在CardsDeck中嵌套的<BsFillBagPlusFill />就会显示在card-icon的位置。

方法2：通过props传入图标组件 #

如果想通过props传递图标，需要在Cards组件中把传入的props当作组件渲染（加尖括号）：

import "../card-style.css";

const Cards = props =>{
    // 解构图标组件，设置默认值避免报错
    const { Icon = null } = props;
    
    return (
        <div className="card text-center">
        <div className="overflow">
          {props.imgsrc && <img
            src={props.imgsrc}
            alt={props.alt || props.title}
            className="card-img-top"
            />}
          <a className="card-link">
            <span className="card-icon">
              {/* 渲染传入的图标组件 */}
              {Icon && <Icon />}
            </span>
          </a>
          <div className="card-body text-dark">
            <h4 className="card-title">{props.title}</h4>
          </div>
        </div>
      </div>
)
    
} 

export default Cards;

然后在CardsDeck中这样传递图标：

<Cards title={link2} Icon={BsFillBagPlusFill} />

额外提示 #

• 可以通过react-icons自带的属性调整样式：<BsFillBagPlusFill size="2rem" color="#2563eb" />，也可以用CSS类控制
• 确保已正确安装依赖：npm install react-icons 或 yarn add react-icons

内容的提问来源于stack exchange，提问作者ITPersonHelpMe