React中map遍历配置数组渲染FontAwesome图标不显示如何解决？

问题根因 #

FontAwesomeIcon组件的icon属性要求传入的是从图标库导入的图标实例对象，你当前contactInfoTop数组中存储的是字符串类型的图标名称，和组件要求的入参类型不匹配，因此无法正常渲染图标。

修改方法 #

方案一：直接修改数组配置（最简便） #

将数组中icon字段的引号去掉，直接引用你已经提前导入的图标变量即可，修改后的数组代码如下：

const contactInfoTop = [
    {
        icon: faMapMarkerAlt,
        topic: "Our Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    },
    {
        icon: faPhoneAlt,
        topic: "Phone Number",
        content: ["+254 700 000 000", "+254 700 000 000"]
    },
    {
        icon: faEnvelope,
        topic: "Our Emails",
        content: ["email1@mail.com", "email2@mail.com", "email3@mail.com"]
    },
    {
        icon: faFax,
        topic: "Our Fax", // 原配置此处topic写错为Our Location，可按需修正
        content: ["+254 20 000 0000"] // 原配置此处内容为地址，可按需调整为传真号码
    }
]

修改后不需要改动其他代码，原有FontAwesomeIcon组件的写法可以保持不变，图标即可正常渲染。

方案二：新增图标映射表（适用图标名必须为字符串的场景） #

如果你的业务场景要求必须把图标名存储为字符串（比如配置是从后端接口返回的），可以新增一个映射表关联字符串和实际的图标实例：

// 在导入图标后新增映射表
const iconMap = {
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
}

渲染时把FontAwesomeIcon组件的icon属性改为从映射表取值即可：

<FontAwesomeIcon
    icon={iconMap[element.icon]}
    className="contact-form-icon"/>

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