重重内网限制,只可用IE,用的很艰辛,学的也艰辛
菜单组件
import React,{Component} from 'react'; import {Link} from 'react-router-dom'; import {Menu,message } from 'antd'; class Hmenu extends Component{ constructor(props){ super(props); } HMeClick= (e) => { message.info("组件Hmenu"+e.key); } render(){ return ( <Menu theme="light" mode="horizontal" onClick={(e)=>{this.HMeClick(e)}} selectedKeys={[this.props.pagekey]} style={{ lineHeight: '64px',padding:'0' }} > <Menu.Item key="h0"> <Link to={{ pathname: '/'}}><b>首页</b></Link> </Menu.Item> <Menu.Item key="h1"> <Link to={{ pathname: '/buildtools'}}><b>工具页</b></Link> </Menu.Item> <Menu.Item key="h2"> <Link to={{ pathname: '/monitor'}}><b>Echarts图使用</b></Link> </Menu.Item> </Menu> ); } } Hmenu.propTypes = { }; export default Hmenu;
头部框架组件
import React,{Component} from 'react'; import {Layout} from 'antd'; const {Header} = Layout; import Head from './Head';暂不提供,这个也是自定义组件 import Logo from './Logo';暂不提供,也是自定义组件 import Hmenu from './Hmenu'; class HeaderLayout extends Component{ render(){ return ( <Header style={{padding:'0px',background: '#fff'}}> <Logo/> <Head username={this.props.username} userjobno={this.props.userjobno}/> <Hmenu pagekey={this.props.pagekey}/> </Header> ); } } HeaderLayout.propTypes = { }; export default HeaderLayout;
关注Hmenu我自己写的这个组件就行
monitor页面的代码
import HeaderLayout from '../../components/Menu/HeaderLayout';
<HeaderLayout pagekey={'h2'} username={'竹子'} userjobno={'abcdefg'}/>
扫描二维码关注公众号,回复:
1103921 查看本文章