如何在React jsx imgage標簽中定義src引數? 我對映了一个陣列,我需要根据陣列的索引定義src引數。
import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";
export default function Menu(props) {
const menuList = props.menu.menuList;
return (
<div className={styles.menuContainer}>
<ul className={styles.list}>
{menuList.map( (m,i) => (
<li className={styles.menuLi}
key={i}>
{m.name}
<img src={ **leaf + (i+1)** } // ???????
alt="menu lístok"
width="50"/>
</li>
)
)}
</ul>
</div>
)
}
最新回復
- 8月前1 #
- 8月前2 #
您可以將其儲存在陣列中並對其进行引用
類似
const leafs = [leaf1,leaf2,...] //then src={leafs[i+1]}
相似問題
- javascript:圖像預載入器如何工作?javascripthtmlimageasynchronouspreloading2021-01-11 01:59
- javascript:什麼時候應该在匯入中使用方括號javascriptreactjswebpackecmascript62021-01-10 18:59