React自定义菜单

重重内网限制，只可用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'}/>

猜你喜欢