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圖標升級

在 [email protected] 中，我們引入了 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