菜单组件
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'}/>