如何使用 font Awesome 与 map() 进行反应

Question

我对 RectJs 非常陌生，所以这可能是一个非常初学者的问题，但是，我有一个名为 MyArr 的对象数组，如下所示：

const MyArr =[
   {picture:'faUser' ,  text:'something'},
   {picture:'faUser' ,  text:'something'} ]
export default MyArr

我想在另一个组件中使用“图片”的值来声明 #FontAwesome 中的哪个图标应该显示。 所以我制作了另一个组件，在其中将对象数组作为 props 值传递到目的地，就像这样

import React, { Component } from 'react'
import MyArr from './MyArr'
import ShowFontAwesome from './ShowFontAwesome'

 class Body extends Component {

  render() {
   return(
        <div>
          <ShowFontAwesome myValue={MyArr} />          
        </div>
)
}}
export default Body

，所以名为“ShowFontAwesome”的组件是我要显示结果的地方； 最后这是组件的代码

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as FontAwesome from '@fortawesome/free-solid-svg-icons';
import React, { Component } from 'react'

 class ShowFontAwesome extends Component {
   constructor(props){
     super(props);}
render() {
    return (
<div>
{this.props.myValue.map(
          (myValues, index)=>{
            return(
<div>
<FontAwesomeIcon icon={`FontAwesome.${myValues.picture}`} />
</div>
)})
</div>
)}}
export default ShowFontAwesome

，它在控制台中记录此错误 ** 找不到图标 {prefix: 'fas', iconName: 'FontAwesome.faUser'} **

Answer 1

更新：

首先将其添加到您的组件中：

import {fas} from '@fortawesome/free-solid-svg-icons'
import { library } from "@fortawesome/fontawesome-svg-core";

library.add(fas);

并将图片值从“faUser”更改为“user”，因此您的数组将如下所示：

const MyArr =[
   {picture:'user' ,  text:'something'},
   {picture:'user' ,  text:'something'} ]
export default MyArr

然后像这样使用它：

<FontAwesomeIcon icon={myValues.picture} />