​

import React, { Component, Fragment } from "react";

import logo from "./logo.png";

import "./style.css";

import axios from "axios";

import { Menu } from "antd";

import * as Icon from "@ant-design/icons";

class AppHeader extends Component {

  constructor(props) {

    super(props);

    this.state = {

      list: [],

    };

  }

  componentDidMount() {

    axios

      .get(

        "https://www.fastmock.site/mock/b7b02adb179431850ed4a85691b2ee1a/news-web/api/headList"

      )

      .then((res) => {

        console.log(res);

        const { list } = res.data.data;

        this.setState({

          list,

        });

      });

  }

  getMenuItems() {

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

      let type = item.type;

      let icon = React.createElement(Icon[type]);

      return (

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

          {item.title}

        </Menu.Item>

      );

    });

  }

  render() {

    return (

      <Fragment>

        <img src={logo} className="app-header-logo" alt="logo" />

        <Menu

          mode="horizontal"

          className="app-header-menu"

          inlineCollapsed="false"

        >

          {this.getMenuItems()}

        </Menu>

      </Fragment>

    );

  }

}

export default AppHeader;