react antd layout sider

最新推荐文章于 2025-01-13 01:51:41 发布

转载最新推荐文章于 2025-01-13 01:51:41 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Nyan-Workflow-FC/p/8717990.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用React实现的可折叠侧边栏组件，该组件利用了Ant Design的Layout和Menu组件，支持多种菜单项及子菜单项，并且能够根据当前路径高亮显示对应的菜单项。

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import {Layout, Menu, Icon} from 'antd';
const {SubMenu} = Menu;
const {Sider} = Layout;

class SideBar extends React.Component {
    constructor(props) {
        super(props);
        this.state =  {
            collapsed: false,
            currentPath : this.props.history.location || '/user'
        }
    }

    toggleCollapsed() {
        this.setState({
            collapsed: !this.state.collapsed
        });
    }
    render() {
        return (
            <Sider
                width={250}
                collapsible
                onCollapse={() => this.toggleCollapsed()}
                collapsed={this.state.collapsed}
                style={{background: '#fff'}}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['0']}
                    //defaultOpenKeys={['sub1']}
                    style={{height: '100%'}}>

                    <Menu.Item key="0">
                        <Link to="/">
                            <Icon type="home" />首页
                        </Link>
                    </Menu.Item>

                    <SubMenu key="sub1" title={<span><Icon type="laptop"/>主导航</span>}>
                        <Menu.Item key="1">
                            <Link to="/antForm">多组表单form处理</Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Link to="/antTable">表格table</Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Link to="/login">首页</Link>
                        </Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" title={<span><Icon type="save"/>商品</span>}>
                        <Menu.Item key="6">
                            <Link to="/product">商品管理</Link>
                        </Menu.Item>
                        <Menu.Item key="10">
                            <Link to="/product/add">商品添加</Link>
                        </Menu.Item>
                        <Menu.Item key="7">
                            <Link to="/product.category">品类管理</Link>
                        </Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub3" title={<span><Icon type="shopping-cart"/>订单</span>}>
                        <Menu.Item key="8">
                            <Link to="/order">订单管理</Link>
                        </Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub4" title={<span><Icon type="user"/>用户</span>}>
                        <Menu.Item key="9">
                            <Link to="/user">用户管理</Link>
                        </Menu.Item>
                    </SubMenu>

                </Menu>
            </Sider>
        );
    };
}
export default withRouter(SideBar);