React新闻网站--Header组件拆分及样式布局

先放图，一个头部组件

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(
            <Layout style={{minWidth:1200}}>
                <Header className="header"><AppHeader/></Header>
                <Content className="content">Content</Content>
                <Footer className="footer">Footer</Footer>
            </Layout>
        )
    }
}

ReactDom.render(<App/>,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(
                <Menu.Item key={item.id}>
                    <Icon type={item.icon} />
                    {item.title}
                </Menu.Item>
            )
        })
    }

    render(){
        return(
            <Fragment>
                <img src={logo} className="logo" />
                <Menu mode="horizontal" className="menu">{this.createMenuItem()}</Menu>
            </Fragment>
        )
    }
}

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 = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0 中会采用按需引入的方式：

 import { Button } from 'antd';

  // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

仍然可以通过兼容包继续使用：

import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

当前项目文件夹下要 cnpm install --save @ant-design/compatible