import react, { Component, Fragment } from 'react';

import logo from './logo.png';

import { Menu } from 'antd';

import axios from 'axios';

import './style.css';

class AppHeader extends Component {

    constructor(props) {

        super(props);

        this.handleClick = this.handleClick.bind(this);

        this.getMenuItems = this.getMenuItems.bind(this);

        this.state = {

            list: []

        };

    }

    handleClick(e) {

        console.log('click ', e);

        this.setState({ current: e.key });

    };

    getMenuItems(){

        return this.state.list.map(item=>{

            return (

                <Menu.Item key={item.id} icon={item.icon}>

                    {item.title}

                </Menu.Item>

            )

        });

    }

    render() {

        const { current } = this.state.list;

        return (

            <Fragment>

                <img src={logo} className="headerLogo" alt="logo" />

                <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">

                    {this.getMenuItems()}

                </Menu>

            </Fragment>

        )

    }

    componentDidMount(){

        axios.get('http://www.dell-lee.com/react/api/header.json').then(res=>{

            const data = res.data.data;

            this.setState({

                list: data

            });

        });

    }

}

export default AppHeader;

相关截图：