如何解决将图标传递到JS对象中
我有一个包含对象数组的js文件,我试图通过组件动态加载属性,但似乎无法弄清楚如何将图标传递给呈现组件。
这是我用来呈现数据的组件:
import React,{ Component } from 'react';
import SkillData from '../../store/skillData';
import './SkillsCard.css';
class SkillsCard extends Component {
state = { }
renderSkills = () =>
SkillData.map((skill,_id) =>
<div key={_id} className="skillCard col-sm-3 m-2">
<div className="top">
{/* ***line in question*** */}
<div className="icon">{skill.icon}</div>
<h5>{skill.title}</h5>
</div>
<div className="bottom">
{skill.techs.map((tech,index)=>(
<div className='skillCardList' key={index}> {tech}</div>
))}
</div>
</div>
);
render() {
return (
this.renderSkills()
);
}
}
export default SkillsCard;
这是我从中提取数据的文件:
const SkillData = [
{
_id: '1',icon: '../../assets/icons/frontend.png',title: 'Front End',techs: ['HTML5','CSS | SCSS','JavaScript','React | Redux','Angular']
},{
_id: '2',icon: '../../assets/icons/server.png',title: 'Back End',techs: ['NodeJS','Express','Postman','Authentication | Authorization']
},{
_id: '3',icon: '../../assets/icons/database.png',title: 'Databases',techs: ['MongoDB','mySQL','PostgreSQL']
}
]
export default SkillData
我遇到的问题是我无法获取图标的路径名来评估和实际渲染图标;相反,我的组件将呈现路径中列出的文本。所有其他属性都很好!有什么想法吗?
解决方法
因为您只是将字符串值呈现到页面:
<div className="icon">{skill.icon}</div>
您是要使用<img>
元素吗?:
<div className="icon">
<img src={skill.icon} />
</div>
,
这在我添加时有效
const icons = require.context('../assets/icons',true);
在SKillData.js文件中,并将路径设置为:
icons('./iconName.png'),
谢谢你,大卫!
,这对我有用。
从本地资产文件夹直接请求,因此您不需要复杂的头文件即可从json文件请求中导入链接
{/* line in question */}
<div className="icon">
<img src={require(`${skill.icon}`)} />
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。