时间戳

首页 > 解决方案 > 从 Json 渲染字体真棒？

reactjs - 从 Json 渲染字体真棒？

问题描述

我试图动态地制作一个导航栏。

我有一个名为“NavItem”的组件

    import ReactHtmlParser from 'react-html-parser';

    export default class NavItem extends Component {
      render() {
          const props = this.props;
          const item = props.item;
          console.log(item.icon);
        return (
           <li> 
               <Link to={item.path}> { ReactHtmlParser(item.icon) }  </Link>
           </li>
        );
      }

}

这在另一个组件中被调用并通过“地图”呈现

我的 json 看起来像这样

   [
        {
            path: '/',
            icon: '<i className="fas fa-home" />',
            toolTip: 'Home'
        },
]

我的代码似乎没有呈现任何东西。我只看到图标应该位于的空白区域。

当我通过 chrome 中的开发工具查看它时，我只看到： <i className="fas fa-home" />

所以它看起来不像是在渲染它。

我有来自不同库的不同图标，这就是为什么我不只是将“classNames”存储在 json 和整个标签中。

标签： reactjsfont-awesome

解决方案

我知道这是一篇旧帖子，但我遇到了同样的问题并最终像这样解决了它。

IconMapping.jsx

import React from 'react';
import {
    faPlusCircle,
    faChevronDown,
    faWrench
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default {
    'faPlusCircle': <FontAwesomeIcon icon={faPlusCircle} />,
    'faChevronDown': <FontAwesomeIcon icon={faChevronDown} />,
    'faWrench': <FontAwesomeIcon icon={faWrench} />
};

然后在您想要图标的组件中

import iconMap from '../../iconMapping';

在您的 JSON 数据循环中

<a href={subitem.url} >
  {iconMap[subitem.icon]}
  {subitem.name}
</a>

推荐阅读