程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了React Font Awsome 从 JSON 导入字体变量名称大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决React Font Awsome 从 JSON 导入字体变量名称?

开发过程中遇到React Font Awsome 从 JSON 导入字体变量名称的问题如何解决?下面主要结合日常开发的经验,给出你关于React Font Awsome 从 JSON 导入字体变量名称的解决方法建议,希望对你解决React Font Awsome 从 JSON 导入字体变量名称有所启发或帮助;

我有一个我导入的 JsON 文件,它的一部分看起来像这样

"icons": [
  { "title": "ExperIEnce","icon": "faGem" },{ "title": "Courteous","icon": "faThumbs" }
]

我在我的代码中循环了这个,下面的代码不起作用,因为我需要 faGem 作为变量,而不是“faGem”作为字符串

{icons.map((val,i) => (
  <li key={i} classname={styles.icon}>
    <FontAwesomeIcon icon={val.icon} />
    <span classname={styles.icontext}>{val.titlE}</span>
  </li>
))}

我也尝试过 eval 和 JsON.parse 来转换字符串,但没有运气

有什么想法吗?

谢谢

解决方法

您可以尝试使用数组作为图标值:

"icons": [
  { "title": "Experience","icon": ['fas','faGem'] },...
]

然后:

    <FontAwesomeIcon icon={val.icon} />

这是文档: https://fontawesome.com/how-to-use/on-the-web/using-with/react

大佬总结

以上是大佬教程为你收集整理的React Font Awsome 从 JSON 导入字体变量名称全部内容,希望文章能够帮你解决React Font Awsome 从 JSON 导入字体变量名称所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: