如何用变量替换React组件中的导入图标？

我需要制作一个可多处复用的卡片组件，包含图标、文本和按钮。已将项目所需图标存入字典，但不清楚如何实现组件的动态配置。希望遵循DRY原则，做一个可导入的组件，通过传入变量来设置图标、文本和按钮内容。以下是我的初始代码：

import React from "react";
import Button from "../Button/Button";
import { IoAppsSharp } from "react-icons/io5";
import { ImDisplay } from "react-icons/im";
import { AiFillSignal } from "react-icons/ai";
import { MdPhoneInTalk } from "react-icons/md";
import { GrCode } from "react-icons/gr";
import { MdSecurity } from "react-icons/md";
import { IoMdSchool } from "react-icons/io";

const iconDict = {
    iconOne: <IoAppsSharp />,
    iconTwo: <ImDisplay />,
    iconThree: <AiFillSignal />,
    iconFour: <MdPhoneInTalk />,
    iconFive: <GrCode />,
    iconSix: <MdSecurity />,
    iconSeven: <IoMdSchool />
}

const Card = ({ icon, title, text, button }) => {
    const checkIcon = iconDict.includes(icon) ? icon : iconDict.iconOne;

    return (
        <a
            href="Bespoke Software"
            className="card"
        >
            <div className="card__icon-container">
                <IoAppsSharp className="card__icon-container--icon" />
            </div>

            <div className="card__text-container">
                <h2>Bespoke Software</h2>
                <p>
                    Tailored software solutions to improve business productivity and
                    online profits.
                </p>
                <br />
            </div>
            <div className="card__button-container">
                <Button>Read More</Button>
            </div>
        </a>
    );
}

export default Card;

问题修正与优化方案 #

1. 修复图标字典判断逻辑
   对象没有includes方法，直接通过键名取值并设置默认值即可：

const selectedIcon = iconDict[icon] || iconDict.iconOne;

2. 动态渲染传入的props
   把组件内硬编码的内容全部替换为传入的props，同时给可选参数设置默认值提升容错性：

• 图标使用selectedIcon变量渲染
• 标题、文本、按钮内容分别用{title}、{text}、{button}
• 链接地址新增为link props，默认值设为#

3. 优化后的完整代码

import React from "react";
import Button from "../Button/Button";
import { IoAppsSharp } from "react-icons/io5";
import { ImDisplay } from "react-icons/im";
import { AiFillSignal } from "react-icons/ai";
import { MdPhoneInTalk } from "react-icons/md";
import { GrCode } from "react-icons/gr";
import { MdSecurity } from "react-icons/md";
import { IoMdSchool } from "react-icons/io";

const iconDict = {
    iconOne: <IoAppsSharp />,
    iconTwo: <ImDisplay />,
    iconThree: <AiFillSignal />,
    iconFour: <MdPhoneInTalk />,
    iconFive: <GrCode />,
    iconSix: <MdSecurity />,
    iconSeven: <IoMdSchool />
}

const Card = ({ icon = 'iconOne', title, text, button, link = '#' }) => {
    const selectedIcon = iconDict[icon] || iconDict.iconOne;

    return (
        <a
            href={link}
            className="card"
        >
            <div className="card__icon-container">
                {selectedIcon}
            </div>

            <div className="card__text-container">
                <h2>{title}</h2>
                <p>{text}</p>
                <br />
            </div>
            <div className="card__button-container">
                <Button>{button}</Button>
            </div>
        </a>
    );
}

export default Card;

使用示例 #

// 导入组件后即可按需传入参数使用
<Card
    icon="iconTwo"
    title="定制展示方案"
    text="为你的业务打造专属的展示系统，提升品牌视觉效果"
    button="了解详情"
    link="/display-solution"
/>

内容的提问来源于stack exchange，提问作者Raffle.ski