如何解决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方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。