使用antd创建一个3级联动菜单栏

最新推荐文章于 2025-06-11 09:00:26 发布

samete

最新推荐文章于 2025-06-11 09:00:26 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： reactJS

本文链接：https://blog.youkuaiyun.com/samete/article/details/51612392

reactJS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Ant Design（antd）库创建一个具有三级联动效果的菜单栏。通过实例代码解析了配置过程，展示了最终的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Index.jsx

import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';
import { Link } from 'react-router';

import { Router, Route, Redirect, IndexRoute } from 'react-router';
import { hashHistory, browserHistory } from 'react-router'

import Menu from '../component/Menu';
import Text1 from '../component/Text1';
import Text2 from '../component/Text2';
import Text1_1 from '../component/Text1_1';
import Text1_2 from '../component/Text1_2';
import Text1_3 from '../component/Text1_3';
import Text1_4 from '../component/Text1_4';
import Text2_1 from '../component/Text2_1';
import Text2_2 from '../component/Text2_2';
import Text2_3_1 from '../component/Text2_3_1';
import Text2_3_2 from '../component/Text2_3_2';

ReactDOM.render((
		<Router history={hashHistory}>
			<Route path="/" component={App}>
				<IndexRoute component={Text1}/>
				<Route path="/menu" component={Menu}/>
				<Route path="/text1" component={Text1}/>
				<Route path="/text2" component={Text2}/>
				<Route path="/text1_1" component={Text1_1}/>
				<Route path="/text1_2" component={Text1_2}/>
				<Route path="/text1_3" component={Text1_3}/>
				<Route path="/text1_4" component={Text1_4}/>
				<Route path="/text2_1" component={Text2_1}/>
				<Route path="/text2_2" component={Text2_2}/>
				<Route path="/text2_3_1" component={Text2_3_1}/>
				<Route path="/text2_3_2" component={Text2_3_2}/>
			</Route> 
		</Router>
	), document.getElementById('react-content'));

App.jsx

import React from 'react';
import { Link } from 'react-router';
import './App.less';
import Menu from '../component/Menu';
import Sider from '../component/Sider';

class App extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<div>
				<nav>
					<h3>总菜单</h3>
					<Sider/>
				</nav>
				{this.props.children}
				
			</div>
		)
	}
}

export default App;

Sider.jsx

import React from 'react';
import { Menu, Icon } from 'antd';
import { Component } from 'react';
import { Link } from 'react-router';

const SubMenu = Menu.SubMenu;

const arr = [
  {
    bigMenu: "menu1",
    smallMenu: ["text1_1", "text1_2", "text1_3", "text1_4"],
  },
  {
    bigMenu: "menu2",
    smallMenu: ["text2_1", "text2_2", {bigMenu: "subMenu2", smallMenu: ["text2_3_1", "text2_3_2"]}],
  },
];

class Sider extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      current: '',
      openKeys: [],
    };
    // this.setState({
    //   current: '1',
    //   openKeys: [],
    // }).bind(this);
  }
  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
      openKeys: e.keyPath.slice(1),
    });
    console.log(this.state.openKeys + this.state.current);
    window.location.hash = e.key;
  }
  onToggle(info) {
    this.setState({
      openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
    }); 
  }
  render() {
    return (
      



      <Menu onClick={this.handleClick.bind(this)}
        style={{ width: 240 }}
        openKeys={this.state.openKeys}
        onOpen={this.onToggle.bind(this)}
        onClose={this.onToggle.bind(this)}
        selectedKeys={[this.state.current]}
        mode="inline">
        {
          arr.map((item, index) => {
            return <SubMenu key={item.bigMenu} title={<span><Icon type="setting" /><span>{item.bigMenu}</span></span>}>
              {
                item.smallMenu.map((o, i) => {
                  if (o instanceof Object) {
                    return <SubMenu key={o.bigMenu} title={<span><Icon type="setting" /><span>{o.bigMenu}</span></span>}>
                      {
                        o.smallMenu.map((j, k)=> {
                          return <Menu.Item key={j}>{j}</Menu.Item>
                        })
                      }
                    </SubMenu>
                  } else {
                    return <Menu.Item key={o}>{o}</Menu.Item>
                  }
                })
              }
            </SubMenu>
          })
        }
      </Menu>


    );
  }
};

export default Sider;

Text1_2(以外的Text和这个类似，就不一一列出了)

import React from 'react';
import { Component } from 'react';
import { Link } from 'react-router';

class Text1_2 extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<h3>你好，这里是text1_2</h3>
		)
	}
} 

export default Text1_2;

效果如下图：