首頁>Program>source

如何在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 #

    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;
      const leafArray = [leaf1, leaf2, leaf3, leaf4, leaf5];
      return (
        <div className={styles.menuContainer}>
          <ul className={styles.list}>
            {
              menuList.map( (m,i) => (
                <li className={styles.menuLi}
                  key={i}>
                  {m.name}
                  <img src={ leafArray[i] }
                    alt="menu lístok"
                    width="50"/>
                </li>
              ))
            }
          </ul>
        </div>
      )
    }
    

  • 8月前
    2 #

    您可以將其儲存在陣列中並對其进行引用

    類似

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

  • python:Azure函式使用sendgrid發送帶有徽標的電子郵件
  • LDAP Pooled Connection from Apache Java Library:来自Apache Java庫的LDAP池連線-我们需要取消繫結吗