老师帮看下怎么遍历icon标签

来源：2-3 Ajax获取Header组件数据

weixin_慕尼黑6514237

2020-04-04 18:30:43

import React ,{Component,Fragment} from 'react';
import logo from './logo.png';
import "./style.css";
import { Menu } from 'antd';
import {
    TrophyOutlined,
    SendOutlined,
    SettingOutlined,
  } from '@ant-design/icons';

  

class AppHeader extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[{
                id:1,text:'VOA慢速英语',type:TrophyOutlined
            },{
                id:2,text:'VOA慢速英语',type:SendOutlined
            }],
        }
    }
    
    MenuItems(){
        return this.state.list.map(item =>{
        return <Menu.Item key={item.id}>
                  {item.text}
                </Menu.Item>
        })
    }

    render(){
        return(
            <Fragment>
            <img src= {logo} alt="logo" className="app-header-logo"/>
            <Menu mode="horizontal"
                className="app-header-menu"
            >
                {this.MenuItems}
            </Menu>
            </Fragment>
        )
    }
}

export default AppHeader;

写回答

2回答