映射和顯示Fontawesome圖示

下面是我的 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: ["[email protected]", "[email protected]", "[email protected]"]
    },
    {
        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之外的所有陣列資訊都按計劃顯示在 這里輸入影像描述

我懷疑問題出在這里

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

應該怎么寫？？

uj5u.com熱心網友回復：

你可以做的是：

代替將 icon 寫為字串值，您可以傳遞從@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: ["[email protected]", "[email protected]", "[email protected]"]
        },
        {
            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

您可以在此鏈接中閱讀更多內容。

標籤：javascript 数组 反应 jsx 字体真棒

上一篇：如何在給定的某個月份獲得上個月的名稱（用文字而不是數值）？[復制]

下一篇：如何按物件陣列分組并連接成單個陣列？[復制]