从单独的 js 文件中导出图像和字体真棒图标

Question

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

图像存储在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>
)
}

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

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

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.

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

文件夹结构：

我错过了关于某事的演员表吗？我查看了很多关于导入/导出图像的堆栈，但没有一个解决方案适合我。

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。