import React , { Component,Fragment} from 'react';
import logo from './logo.png';
import './header.css';
import { Menu, Icon } from 'antd';

class AppHeader extends Component {

    constructor(props){
        super(props);
        this.state = {
            list:[{
                id:1,
                icon:"mail",
                title:"VOA慢速英语"
            },{
                id:2,
                icon:"mail",
                title:"VOA慢速英语"
            },{
                id:3,
                icon:"mail",
                title:"VOA慢速英语"
            },{
                id:4,
                icon:"mail",
                title:"VOA慢速英语"
            },{
                id:5,
                icon:"mail",
                title:"VOA慢速英语"
            },{
                id:6,
                icon:"mail",
                title:"VOA慢速英语"
            }]
        }
    }

    getMenuItems(){
        return this.state.list.map(item =>{
            return(
                <Menu.Item key={item.id}>
                    <Icon type={item.icon} />{item.title}
                </Menu.Item>
            )
        })
    }

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

            </Fragment>
        )
    }
}

export default AppHeader;

​import React, { Component } from  'react';
import ReactDom from 'react-dom';
import 'antd/dist/antd.css';
import { Layout } from 'antd';
import './style.css';
import AppHeader from './components/Header';

const { Header, Footer, Content } = Layout;

class App extends Component {
    render(){
        return(
            <Layout style={{ minWidth : 1300 }}>

                <Header className="header">
                    <AppHeader></AppHeader>
                </Header>
                <Content className="content">Content</Content>
                <Footer className="footer">Footer</Footer>
            </Layout>
        )
    }
}




ReactDom.render(<App/>,document.getElementById('root'));