当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React新闻网站--Header组件拆分及样式布局

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

2020年04月16日  | 移动技术网IT编程  | 我要评论

先放图，一个头部组件

 

 

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



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                


                

                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网