将图标传递给 JS 对象

Question

我有一个带有对象数组的 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

我遇到的问题是我无法获取图标的路径名来评估和实际呈现图标；相反，我的组件呈现路径上列出的文本。所有其他属性渲染得很好！有什么想法吗？

Answer 1

因为您只是将字符串值呈现给页面：

<div className="icon">{skill.icon}</div>

您是要使用 <img> 元素吗？:

<div className="icon">
  <img src={skill.icon} />
</div>

Answer 2

这在我添加时有效

const icons = require.context('../assets/icons', true);

在 SKillData.js 文件中并将路径设置为：

icons('./iconName.png'),

非常感谢，大卫！

Answer 3

这对我有用。

直接从您的本地资产文件夹中获取，因此您不需要从 json 文件请求

中导入 link 头文件的复杂性

{/* line in question */}
<div className="icon">
  <img src={require(`${skill.icon}`)} />
</div>

将图标传递给 JS 对象

passing icons into a JS object

javascript

icons

reactjs