映射和显示 Fontawesome 图标答案

【问题标题】：Mapping and displaying Fontawesome Icons映射和显示 Fontawesome 图标
【发布时间】：2021-12-22 22:07:50
【问题描述】：

下面是我的 ContactTopForm 组件。

import { 
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    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 Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon"/>
                        <h4 className="contact-form-item-h4">
                            {element.topic} 
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

我正在尝试映射 contactInfoTop 数组中的所有信息并呈现它们，同时尝试编写尽可能少的 jsx。

问题是除了如下图的FontAwesomeIcons外，所有数组信息都按计划显示 enter image description here

我怀疑问题出在这里

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

应该怎么写？？

【问题讨论】：

标签： javascript arrays reactjs jsx font-awesome

【解决方案1】：

你可以做的是：

您可以传递从@fortawesome/free-solid-svg-icons 导入的图标名称，而不是将图标写入字符串值。

所以你的代码应该是这样的：

{
  icon: faFax, // icon name not string
  topic: "Our Location",
  content: ["SoHo 94 Broadway St New York, NY 1001"]
}

这是您问题的有效解决方案：

import {
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    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 Location",
            content: ["SoHo 94 Broadway St New York, NY 1001"]
        }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon" />
                        <h4 className="contact-form-item-h4">
                            {element.topic}
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

您可以在link 中阅读更多内容。

【讨论】：