React react-icons-kit并动态获取图标

时间:2019-01-06 17:55:52

标签: reactjs dynamic icons react-icons

如何使用扩展React Icon套件在React中动态获取图标?当我从数组“ sociallinks”中获取图标时,我尝试找出在MAP循环中动态添加图标的方法

这是代码的一部分

....
import { Icon } from 'react-icons-kit'
import {facebook} from 'react-icons-kit/feather/facebook';
import {instagram} from 'react-icons-kit/feather/instagram';
import {twitter} from 'react-icons-kit/feather/twitter';
....

// dynamic array from redux store
"sociallinks": [
    {
      "_id": 1,
      "type": "facebook",
      "linkname": "Facebook",
      "link": "https://www.facebook.com/zzzzz/"
    },
    {
      "_id": 2,
      "type": "instagram",
      "linkname": "Instagram",
      "link": "https://www.instagram.com/yyy/"
    },
    {
      "_id": 3,
      "type": "twitter",
      "linkname": "Twitter",
      "link": "https://twitter.com/xxx"
    },
    {
      "_id": 4,
      "type": "youtube",
      "linkname": "Youtube",
      "link": "https://www.youtube.com/user/youtube"
    }
  ]

// problem is here how to markup icon = {xxxxx} from map item.type? item.link and item.linkname works fine.. but not item.type :((( 
<ul>
     {this.props.data.socialLinks.map((item,i) => (
      <li key = {i}> <a href = {item.link}><Icon size={18} icon={item.type} />{item.linkname}</a></li>
       ))  
     } 
</ul>

0 个答案:

没有答案