欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 09:30:31
先放图,一个头部组件 index.js import React,{Component} from 'react'; import ReactDom from 'react-dom'; import { Layout } from 'antd'; import 'antd/dist/antd.css ......

先放图,一个头部组件

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 图标()。使用了字符串命名的图标 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