Как использовать Fontawesome Elements, который находится в массиве внутри компонента в ReactJS? - PullRequest
Новая
       8

Как использовать Fontawesome Elements, который находится в массиве внутри компонента в ReactJS?

0 голосов
/ 15 апреля 2020

Я пытаюсь понять рамки реагирования и es6, поскольку я совершенно новичок в современном JS. Ранее я делал ООП и пытался понять Модерн JS. Здесь, в этом коде, у меня есть функциональный компонент внутри компонента класса. Я использовал библиотеку Fontawesome для реакции. Иконки хранятся внутри массива с именем information. Когда я отрисовываю этот компонент Class, иконка font-awesome не будет отрисовываться, хотя часть имени массива показывает 

import React, { Component } from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDesktop, faServer, faMobile} from '@fortawesome/free-solid-svg-icons'

const information = [
    {"fontName" : "faDesktop", "name" : "Website"},
    {"fontName" : "faServer","name" : "Web App"},
    {"fontName" : "faMobile","name" : "Mobile App"},

]
const Service=(props)=>{
    return (
        <>
    <FontAwesomeIcon icon={props.fontName} size="6x"/>
    <h6>{props.name }</h6>
    </>
    );
}
export default class Services extends Component {



    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        <h2>Our Services</h2>

                           {information.map((info )=> 
                            <div className="col s12 m4 l4">
                            <Service icon={info.fontName} name={info.name}/>
                            </div>
                           )}



                    </div>
                </div>

            </div>
        )
    }


}

Мои запросы - 1. Как использовать иконки Fontawesome в массиве и передать как реквизит для компонента обслуживания. 2. Когда использовать основанный на классе компонент или функциональный компонент. Можем ли мы смешать то же самое? 3. Когда использовать функции es6 и обычные js? Это сбивает с толку, некоторые ресурсы будут полезны от JS мастеров.

1 Ответ

0 голосов
/ 15 апреля 2020

Если обязательно передать имя значка в виде строки компоненту service, вы можете создать объект из замечательных иконок, которые вы пытаетесь импортировать в файл. fontName передается в Service Компонент имеет строковый тип, однако самые интересные переменные faDasktop и другие значки не имеют значения строкового типа 


import React, { Component } from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDesktop, faServer, faMobile} from '@fortawesome/free-solid-svg-icons'

const mapIcons = {
   faDesktop, faServer, faMobile
}


const information = [
    {"fontName" : "faDesktop", "name" : "Website"},
    {"fontName" : "faServer","name" : "Web App"},
    {"fontName" : "faMobile","name" : "Mobile App"},

]
const Service=(props)=>{
    return (
        <>
    {mapIcons[props.fontName] && (
      <FontAwesomeIcon icon={mapIcons[props.icon]} size="6x"/>
    )}
    <h6>{props.name }</h6>
    </>
    );
}
export default class Services extends Component {



    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        <h2>Our Services</h2>

                           {information.map((info )=> 
                            <div className="col s12 m4 l4">
                            <Service icon={info.fontName} name={info.name}/>
                            </div>
                           )}



                    </div>
                </div>

            </div>
        )
    }


}
...