关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

云南大王-React新闻网站

发布时间:2020-04-16 00:00:00
先放图,一个头部组件     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(
Content
Footer
) } } ReactDom.render(,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( {item.title} ) }) } render(){ return( {this.createMenuItem()} ) } } 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 = () => (
);   4.0 中会采用按需引入的方式: import { Button } from 'antd'; // tree-shaking supported - import { Icon } from 'antd'; + import { SmileOutlined } from '@ant-design/icons'; const Demo = () => (
- +
); // or directly import import SmileOutlined from '@ant-design/icons/SmileOutlined';   仍然可以通过兼容包继续使用: import { Button } from 'antd'; import { Icon } from '@ant-design/compatible'; const Demo = () => (
); 当前项目文件夹下要 cnpm install --save @ant-design/compatible

/template/Home/Zkeys/PC/Static