先放图，一个头部组件
index.js
import React,{Component} from 'react';
import ReactDom from 'react-dom';
import { Layout } from 'antd';
import 'antd/dist/antd.css';
import './style.css';
import AppHeader from './components/AppHeader/';
const { Header, Footer, Content } = Layout;
class App extends Component{
render(){
return(
Content
)
}
}
ReactDom.render(
,document.getElementById('root'));
style.css
.header{
background-color: #fff;
border-bottom:1px solid #999;
}
.content{
min-height:600px;
}
.footer{
text-align: center;
border-top:1px solid #999;
}
components/AppHeader/index.js
import React,{Component,Fragment} from 'react';
import logo from './logo.png';
import './style.css';
import { Menu } from 'antd';
import {MailOutlined} from '@ant-design/icons';
import axios from 'axios';
import { Icon } from '@ant-design/compatible';
class AppHeader extends Component{
constructor(props){
super(props);
this.state={
list:[]
}
}
componentDidMount(){
axios.get("http://www.dell-lee.com/react/api/header.json")
.then(res=>{
console.log(res.data.data);
this.setState({
list:res.data.data
})
})
}
createMenuItem(){
return this.state.list.map(item=>{
return(
{item.title}
)
})
}
render(){
return(
)
}
}
export default AppHeader;
conponents/AppHeader/style.css
.logo{
height:45px;
float:left;
margin-top:10px;
}
.menu{
float:left;
margin-left:40px !important;
height:45px !important;
border-bottom:none !important;
}
关于icon图标升级
在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。
旧版 Icon 使用方式将被废弃：
import { Icon, Button } from 'antd';
const Demo = () => (
);
4.0 中会采用按需引入的方式：
import { Button } from 'antd';
// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';
const Demo = () => (
-
+
} />
);
// or directly import
import SmileOutlined from '@ant-design/icons/SmileOutlined';
仍然可以通过兼容包继续使用：
import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';
const Demo = () => (
);
当前项目文件夹下要 cnpm install --save @ant-design/compatible
