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 ......
先放图,一个头部组件
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