maycur-business/lib/MkLayout/Readme.md

maycur business react components of web

#### MkLayout 布局组件

## API

| 属性 | 说明 | 类型 | 默认值 |
| --- | ---  | --- | ---   |
| pathArr | 页面路径 | Array | 无 |
| setMenus | 返回顶部menu数据的方法 | Function | 无 |
| setSiderMenus | 返回侧边栏menu数据的方法 | Function | 无 |
| renderMenu | 渲染顶部menu | Function | 无 |
| renderSiderMenu | 渲染侧边栏menu | Function | 无 |
| renderContent | 渲染页面 | Function | 无 |
| noSider | 是否显示侧边菜单 | Boolean | 无 |

```js static
class example {

    constructor(){

    }

    renderContent = () => {

        const { match } = this.props;
        return (
            <div className={styles.content}>
                <NormalRouter match={match} />
            </div>
        );

    }

    renderMenu = (menu) => {

        const { personalInfo } = this.props;
        const menus = localstorage.getItem('mkApp.menus');
        const pattern = new RegExp('^' + menu.permission);
        const arr = _.filter(menus, menu => {
            return pattern.test(menu);
        }) || [];
        return (  
            <Link to={menu.path}>
                {menu.menuName}
            </Link>   
        )

    }

    renderSiderMenu = (menu) => {

        const { menus } = this.props;
        const index = _.indexOf(menus, menu.permission);
        return (
            (menu.permission && index > -1 || !menu.permission) ?
                (
                    menu.hasSub ?
                        <span>
                            {menu.icon ? <span className={ `fm ${menu.icon}` }></span> : null}
                            <span>{menu.menuName}</span>
                        </span> :
                        <Link to={menu.path}>
                            {menu.icon ? <span className={ `fm ${menu.icon}` }></span> : null}
                            <span>{menu.menuName}</span>
                        </Link>
                ) : null
        );

    }

    setMenus = () => {

        const { leftMenus, rightMenus } = routerList.fetchRouter();
        return {
            leftMenus,
            rightMenus
        };

    }

    setSiderMenus = () => {

        const { location: { pathname } } = this.props;
        const { leftMenus, rightMenus } = routerList.fetchRouter();
        const pathArr = pathname.split('/');
        const menuName = pathArr[1] || 'home';
        const currentMenu = _.filter(leftMenus.concat(rightMenus), { name: menuName })[0] || {};
        const siderMenus = currentMenu.routes || [];
        return siderMenus;

    }

    render(){
        return <MkLayout

        setMenus={this.setMenus}
        setSiderMenus={this.setSiderMenus}
        renderMenu={this.renderMenu}
        renderSiderMenu={this.renderSiderMenu}
        renderContent={this.renderContent}
        pathArr={pathArr}

    />

    }

    
}
```