react+antd+less_x86(左侧菜单与右侧内容、面包屑联动)

• react+antd_实现左侧菜单与右侧内容的联动
  • 　　

    import React, { Component } from 'react';
    import { Switch, Route } from 'react-router-dom';
    import Home from './pages/Home/Home.jsx';
    
    export default class App extends Component {
        render () {
            return (
                <div>
                    <Switch>
                        {/* 主页路由 */}
                        <Route path="/home" component={Home}></Route>
                    </Switch>
                </div>
            );
        };
    };

  • import React, { Component } from 'react';
    import './Home.less';
    import { Switch, Route } from 'react-router-dom';
    import X86Menu from '../../components/X86_Menu/X86_Menu.jsx';
    import Apply from '../Apply/Apply.jsx';
    import Cloud from '../Cloud/Cloud.jsx';
    import Process from '../Process/Process.jsx';
    import X86Breadcrumb from '../../components/X86_Breadcrumb/X86_Breadcrumb.jsx';
    
    export default class Home extends Component {
        render () {
            return (
                <div className="HomeStyle">
                    {/* 菜单 */}
                    <div className="MenuStyle">
                        {/* 菜单内容 */}
                        <X86Menu></X86Menu>
                    </div>
                    {/* 列表 */}
                    <div className="ListStyle">
                        {/* 面包屑 */}
                        <div className="ListCrumbs">
                            <X86Breadcrumb></X86Breadcrumb>
                        </div>
                        {/* 列表路由 */}
                        <Switch>
                            {/* 应用设备 */}
                            <Route path="/home/apply" component={Apply}></Route>
                            {/* 云设备 */}
                            <Route path="/home/cloud" component={Cloud}></Route>
                            {/* 实时进程 */}
                            <Route path="/home/process" component={Process}></Route>
                        </Switch>
                    </div>
                </div>
            );
        };
    };

  • import React, { Component } from 'react';
    import { Link, withRouter } from 'react-router-dom';
    import { Menu } from 'antd';
    import menuList from '../../router/router.js';
    const { Item } = Menu;
    
    class X86_Menu extends Component {
        mode = 'inline';
        theme = 'light';
        componentDidMount () {
            
        };
        createMenu = (target) => {
            return target.map( item => {
                //没有子级
                if (!item.children) {
                    return (
                        <Item key={item.key}>
                            <Link to={item.path}>{item.title}</Link>
                        </Item>
                    );
                };
            } );
        };
        render () {
            return (
                <div>
                    <Menu mode={this.mode} theme={this.theme} defaultSelectedKeys={this.props.location.pathname.split('/').reverse()[0]}>
                        {
                            this.createMenu(menuList)
                        }
                    </Menu>
                </div>
            );
        };
    };
    
    export default withRouter(X86_Menu);

    import React, { Component } from 'react';
    import './X86_Breadcrumb.less';
    import { withRouter } from 'react-router-dom';
    import Text from '../Text/Text.jsx';
    import menuList from '../../router/router.js';
    
    class X86_Breadcrumb extends Component {
        state = {
            TextContent: ''
        };
        componentDidMount () {
            this.setState({
                TextContent: 'admin'
            });
        };
        render () {
            let { TextContent } = this.state;
            // 响应面包屑
            let BreadcrumbName;
            let BreadcrumbNameList = [];
            BreadcrumbNameList = menuList.map( item => {
                if (item.path === this.props.location.pathname) return item.title;
            } );
            BreadcrumbNameList.forEach( item => {
                if (item !== undefined) BreadcrumbName = item;
            } );
            return (
                <div className="X86_BreadcrumbStyle">
                    {/* 账号信息 */}
                    <div className="X86_BreadcrumbAccount">
                        <Text TextContent={TextContent}></Text>
                    </div>
                    {/* 面包屑 */}
                    <div>
                        { BreadcrumbName }
                    </div>
                </div>
            );
        };
    };
    
    export default withRouter(X86_Breadcrumb);

    const menuList = [
        {
            title: '应用管理',
            key: 'apply',
            path: '/home/apply'
        },
        {
            title: '云设备管理',
            key: 'cloud',
            path: '/home/cloud'
        },
        {
            title: '实时进程',
            key: 'process',
            path: '/home/process'
        }
    ];
    
    export default menuList;