javascript - React中图像的src参数的变量名

Question

如何在 React jsx 图像标签中定义 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>
    )
}

标签： javascriptreactjsimageparameters

Answer 1

您可以将它存储在一个数组中并引用它

像

const leafs = [leaf1,leaf2,...]
//then 
src={leafs[i+1]}