React简单自定义菜单

最新推荐文章于 2025-04-16 11:45:30 发布

书香代码

最新推荐文章于 2025-04-16 11:45:30 发布

阅读量2.3k

点赞数

分类专栏： React

本文链接：https://blog.youkuaiyun.com/u010138825/article/details/79172128

版权

React 专栏收录该内容

3 篇文章

订阅专栏

菜单组件

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'}/>