import React from 'react'; import styles from './index.less'; const Menu = props => { const renderTitle = title => <h4 className={styles.title}>{title}</h4>; const renderMenuItem = data => { let menuItem = []; if (!data) { return; } // eslint-disable-next-line no-prototype-builtins if (!data.hasOwnProperty('routes')) { menuItem = ( <div className={styles['main-menus-recentAll-menu-group-items-menu-item']} onClick={event => props.handleClick(event, data)} > <img src={data.extData.icon} alt="" /> <a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}> {data.name} </a> </div> ); } else { data.routes.forEach((item, index) => { const render = ( <div className={styles['main-menus-recentAll-menu-group-items-menu-item']} key={item.name} onClick={event => props.handleClick(event, item)} > <img src={item.extData.icon} alt="" /> <a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}> {item.name} </a> </div> ); menuItem.push(render); }); } // eslint-disable-next-line consistent-return return menuItem; }; return ( <div className={styles['main-menus']}> <div className={styles['main-menus-recentAll']}> <div className={styles['main-menus-recentAll-menu-group']}> {(props.data.routes || []).map((item, index) => ( <div className={styles['main-menus-recentAll-menu-group-items']} key={item.name}> {renderTitle(item.name)} {renderMenuItem(item)} </div> ))} </div> </div> </div> ); }; export default Menu;