React渲染组件React-Icons

问题描述

如何根据json文件信息呈现组件？我有一张正在渲染UL列表的地图。每个李被渲染。 （我知道我可以使用img做到这一点，而不是从json文件中将src = {}作为对象传递。但是我想知道是否还有另一种解决方法。代码如下：

import React from 'react'
import { FiLinkedin as LinkedinIcon,figithub as GithubIcon } from 'react-icons/fi';

import Data from '../../socials.json';

import { Container } from './styles';

export default function Profile() {
  return (
    <Container>
      <ul id="profile-links">
        {Data.map((social,index) => {
          return (
            <li id={social.id} key={social.id}>
              <a href={social.url} target="_BLANK" rel="noreferrer">
                <LinkedinIcon size={22} />  // change this component based on -social.icon info-
                <strong>{social.title}</strong>
                <span className="small-link">{social.slug}</span>
              </a>
            </li>
          )
        })}
      </ul>
    </Container>
  )
}

解决方法

我会将您的socials.json转换为socials.js。然后，您可以像这样更灵活地设置数据：

import {
  FiLinkedin as LinkedinIcon,FiGithub as GithubIcon,} from 'react-icons/fi';

const Data = [
  {
    id: 1,url: 'url 1',title: 'title 1',slug: 'slug 1',icon: LinkedinIcon,},// Other socials...
];

export default Data;

然后您可以像这样在地图中动态呈现这些图标：

// ...
import Data from '../../socials';

export default function Profile() {
  return (
    <Container>
      <ul id="profile-links">
        {Data.map((social,index) => {
          return (
            <li id={social.id} key={social.id}>
              <a href={social.url} target="_BLANK" rel="noreferrer">
                <social.icon size={20} />
                <strong>{social.title}</strong>
                <span className="small-link">{social.slug}</span>
              </a>
            </li>
          );
        })}
      </ul>
    </Container>
  );
}

,

您可以创建一个方法，该方法将根据social.icon的值为您提供图标。例如：

const getIcon = (icon) => {
    switch(icon) {
       case A:
        return <IconA />;
       case B:
        return <IconB />;
       default:
        return null;
    }
}

然后使用social.icon作为参数在需要的地方调用此getIcon方法。