Question

我试图动态制作导航栏。

我有一个名为“ 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和整个标签中。

Answer 1

我知道这是一篇过时的文章，但是我遇到了同样的问题，并最终像这样解决了它。

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>

Answer 2

确保您包括字体超赞的库。检查sources中的dev-tools标签，并确保其中包含真棒字体。

如果使用的是最新版本（Font Awesome 5），请确保正确导入字体https://fontawesome.com/how-to-use

编辑：如果您在JSON中使用HTML，请尝试设置dangerouslySetInnerHTML：

<div dangerouslySetInnerHTML={ {__html: item.icon} } />

从Json渲染字体很棒吗？

2 个答案: