react ＜1＞使用iconfont.cn ＜2＞使用Ant提供的组件如果用服务器数据推荐使用第1种方式，别问原因，你不会想知道的＜3＞ant4.0之前的

本文展示了如何在React应用中利用Ant Design库创建一个水平菜单，并实现图标与数据的动态绑定。通过从远程API获取数据并利用IconFont和Ant Design Icons，实现了菜单项的动态渲染。同时，文章还演示了如何处理组件的挂载后事件，以获取并更新状态。

摘要由CSDN通过智能技术生成

/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import logo from "./logo.jpg";
import "./style.css";
import { Menu} from "antd";
/* 添加这个兼容包*/
import { Icon } from '@ant-design/compatible';
import {
  createFromIconfontCN,
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
} from "@ant-design/icons";

const IconFont = createFromIconfontCN({
  // 阿里生成Symbol
  scriptUrl: ["//at.alicdn.com/t/font_2542130_gv3nhavgcec.js"],
});

class AppHeader extends React.Component {
  constructor(props) {
    super(props);
//用网络世界将本地数据删除即可 然后调用getMenuItems就OK了
    this.state = {
      list: [
        { id: 1, icon: "icon-iconfonticon6", title: "voa慢速英语" },
        { id: 2, icon: "icon-weibo", title: "voa慢速英语" },
        { id: 3, icon: "icon-weixin", title: "voa慢速英语" },
        { id: 4, icon: "icon-search", title: "voa慢速英语" },
        { id: 5, icon: "icon-UserSettings", title: "voa慢速英语" },
        { id: 6, icon: "icon-iconfonticon6", title: "voa慢速英语" },
      ],
      listAnt: [
        { id: 1, icon: <HomeOutlined />, title: "voa慢速英语" },
        { id: 2, icon: <HomeOutlined />, title: "voa慢速英语" },
        { id: 3, icon: <SettingFilled />, title: "voa慢速英语" },
        { id: 4, icon: <HomeOutlined />, title: "voa慢速英语" },
        { id: 5, icon: <SmileOutlined />, title: "voa慢速英语" },
        { id: 6, icon: <SmileOutlined />, title: "voa慢速英语" },
      ]
    };
  }
componentDidMount(){
    const dell = 'http://www.dell-lee.com/react/api/header.json'
    const xiao = 'https://www.fastmock.site/mock/87721b8caf6c15282032d85a0d4e460f/home/react/head.json'
    axios.get(xiao)
    .then(res => {
      this.setState({
        list: res.data.data
      })
      console.log(res.data.data);
    })
  }

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

  //旧的方式获取远程数据
getMenuItemsAnt() {
    return this.state.list.map((item) => {
      return (
          <Menu.Item key={item.id} >
            <Icon type={item.icon} />
            {item.title}
          </Menu.Item>
      );
    });
  }
  render() {
    return (
      <>
        <img src={logo} className="app-header-logo" />
        <Menu mode="horizontal" className="app-head-menu">
        {this.getMenuItemsAnt()}
        </Menu>
      </>
    );
  }
}

export default AppHeader;