從單獨的 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}/>
   })}

菜單項.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中將組件作為 jsx 傳遞。 修改為：

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

jsx只是帶有一些語法糖的 javascript。