如何制作多層選單?


  • 0

    初學React,想做一個3層的選單。而每個子選單的數量都不同,可以怎處理?

    function NumberList(props) {
      const numbers = props.numbers;
    
      const listItems = numbers.map((number) =>
      <div className="dropdown" key={number.title}>
        <div className="dropbtn">
          <a href="#" cid="000000"><img src={number.content}></img><span className="label">{number.title}</span></a>
        </div>
        <div className="dropdown-content wapper">
          <div className="row">
            <div className="column">
              <h3 ></h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
        </div>
      </div>
      );
    
      return (
        <div className="mb100 top-menu" >
          <div className="navbar wrapper ">
            {listItems}
          </div>
        </div>
      );
    }
    
    
    
    const numbers = [
      {title: '流行女裝', content: 'img/catmenu_icons/catmenu_icon_000000.png',subtitle:[{mytest:'12',sublink[mytest:'12'],},{mytest:'13'},],},
      {title: '男士服飾', content: 'img/catmenu_icons/catmenu_icon_100000.png'},
      {title: '幼兒生活', content: 'img/catmenu_icons/catmenu_icon_150000.png'},
      {title: '鞋袋配飾', content: 'img/catmenu_icons/catmenu_icon_200000.png'},
      {title: '飲飲食食', content: 'img/catmenu_icons/catmenu_icon_250000.png'},
      {title: '休閒喜好', content: 'img/catmenu_icons/catmenu_icon_300000.png'},
      {title: '運動戶外', content: 'img/catmenu_icons/catmenu_icon_350000.png'},
      {title: '居家生活', content: 'img/catmenu_icons/catmenu_icon_400000.png'},
      {title: '健康美容', content: 'img/catmenu_icons/catmenu_icon_450000.png'},
      {title: '玩具精品', content: 'img/catmenu_icons/catmenu_icon_500000.png'},
      {title: '家居電器', content: 'img/catmenu_icons/catmenu_icon_550000.png'},
      {title: '數碼電器', content: 'img/catmenu_icons/catmenu_icon_600000.png'},
      {title: '香港品牌', content: 'img/catmenu_icons/catmenu_icon_650000.png'},
      {title: '關愛社區', content: 'img/catmenu_icons/catmenu_icon_700000.png'},
    ];
    
    ReactDOM.render(
      <NumberList numbers={numbers} />,
      document.getElementById('root')
    );

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待