React项目中如何通过变量动态设置FontAwesome图标

你可以直接使用JavaScript对象的动态属性访问语法，通过方括号[]读取Brand_icons中对应skill变量的图标实例即可，修改后的循环代码如下：

{skills.map((skill, index) => (
  <div key={index}>
    <FontAwesomeIcon icon={Brand_icons[skill]} size="6x" transform="shrink-6"/>
  </div>
))}

注意：React列表循环渲染需要给子节点添加唯一key属性，上述代码用索引作为key仅为示例，若你的skills数组会发生增删改操作，建议使用图标名作为唯一key。

可选优化 #

如果担心skills数组中存在不存在的图标名导致渲染报错，可以添加兜底处理：

// 先导入一个兜底的图标，比如问号图标
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'

// 渲染时做 fallback 处理
{skills.map((skill, index) => (
  <div key={skill}>
    <FontAwesomeIcon 
      icon={Brand_icons[skill] ?? faQuestionCircle} 
      size="6x" 
      transform="shrink-6"
    />
  </div>
))}

内容的提问来源于stack exchange，提问作者Charaka Janith