从单独的 js 文件导出图像和 font-awesome 图标

Question

我已经阅读了很多关于如何将图像存储在 objects 数组中的解决方案。我做了每一个解决方案，其中 none 对我有用。也许我缺少演员表？

图像存储在 src 文件夹中。

我试过export default，可惜没有解决问题。

导出部分(MenuList.js):

import burgerImg from '../images/menu-images/burger-menu2.png'
import pizzaImg from '../images/menu-images/pizza-menu1.png'
import kebabImg from '../images/menu-images/kebab-menu1.png'
import {FaHamburger} from 'react-icons/fa'
import {FaPizzaSlice} from 'react-icons/fa'
import {GiMeal} from 'react-icons/gi'


export const MenuList = [
    {
        id: 1,
        name: 'Burgers',
        img: burgerImg,
        icon: FaHamburger
    },
    {
        id: 2,
        name: 'Pizzas',
        img: pizzaImg,
        iconImg: FaPizzaSlice
    },
    {
        id: 3,
        name: 'Kebabs',
        img: kebabImg,
        icon: GiMeal
    }
]

导入部分(Menu.js):

import {MenuList} from './MenuList'

 state = {
    menu: MenuList
}
   {this.state.menu.map(item => {
               return <MenuItem key={item.id} itemInfo={item}/>
   })}

MenuItem.js:

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        {itemInfo.img}
        {itemInfo.icon}
    </div>
)
}

然后我尝试从单个组件加载所有内容：

export default function HomeMenu() {
return (
    <div>
        <h1>Menu</h1>
        <Menu></Menu>
    </div>
)
}

我正在映射列表中的每个元素并将这些元素传递给另一个组件，但问题是我的图像和 font-awesome 图标没有加载。

当我运行项目或刷新它时，我得到以下结果：

Burgers/static/media/burger-menu2.d3dca9de.png

控制台输出如下：

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

图像的开发工具面板元素部分显示如下：

文件夹结构：

我是不是错过了演员阵容？我查看了很多关于 importing/exporting 图片的堆栈，但是 none 的解决方案对我有用。

Answer 1

将您的 MenuItem.js 修改为，

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        <img src={itemInfo.img} alt='' />
        {itemInfo.icon}
    </div>
)
}

要解决图标问题，请在对象中将组件作为 jsx 传递。修改为：

export const MenuList = [
    {
        id: 1,
        name: 'Burgers',
        img: burgerImg,
        icon: <FaHamburger /> //jsx
    },
...

jsx 只是 javascript 加上一些语法糖。

从单独的 js 文件导出图像和 font-awesome 图标

Exporting images and font-awesome icons from seperate js file

javascript

image

font-awesome

reactjs