我正在尝试了解react框架和es6,因为我对现代JS完全陌生。我以前一直在做OOP,并试图了解Modern JS。在这段代码中,我在类组件中有一个功能组件。我已经使用Fontawesome库进行反应了。图标保存在名为信息的数组中。当我渲染这个Class组件时,字体真棒图标将不会渲染,尽管该数组的名称部分正在显示
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大师会提供一些资源。
如果必须将图标名称作为字符串传递给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.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>
)
}
}