/* 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;