sy-react-pro-layout

用于后台管理系统的左右结构框架

用法

const ChildCom = ({onClick}) => {
    return <div onClick={() => onClick('全给你:' + new Date().getTime())}>点这个子组件</div>
}
const ParentCom = () => {
    const [childValue, setChildValue] = useState<any>('');
    return (
        <div>
            <p>子组件的值: {childValue}</p>
            <ChildCom onClick={(val) => setChildValue(val)}></ChildCom>
        </div>
    )
}
const App = () => {
    /* 自定义logo */
    const titleLogo: ReactElement = <div
        style={{color: '#fff', fontWeight: 600, width: '140px', fontSize: '20px', margin: 'auto', paddingTop: 17}}>Sy
        Pro
        Layout</div>;
    const [menuData, setMenuData] = useState<MenuItem[]>([]);
    /* 自定义头部 */
    const customHeader = <div style={{float: 'right', position: 'relative', top: -10, right: 20}}><a>欢迎,张三</a></div>
    /*监听菜单点击事件*/
    const onMenuItemClick = (evt: React.MouseEvent, level: number, item: MenuItem) => {
        console.log('菜单点击', evt, level, item)
    }
    useEffect(() => {
        // 模拟网络延迟方式加载菜单
        setTimeout(() => {
            const tmpMenuData: MenuItem[] = [
                {
                    key: 1,
                    icon: 'icon iconfont iconbear',
                    name: '菜单一',
                    children: [
                        {
                            key: 2,
                            name: '菜单一-1',
                            route: 'path/01',
                        },
                        {
                            key: 3,
                            name: '菜单一-2',
                            route: 'path/02',
                        },
                        {
                            key: 4,
                            name: '菜单一-3',
                            route: 'path/03',
                        }
                    ]
                },
                {
                    key: 5,
                    icon: 'icon iconfont iconmifan',
                    route: 'path/x',
                    name: '菜单二很长很长很长很长很长很长',
                    children: [
                        {
                            key: 6,
                            name: '菜单二-1很长很长很长很长很长很长',
                            route: 'path/y',
                            children: [
                                {
                                    key: 7,
                                    name: '菜单二-1-1很长很长很长很长很长很长',
                                    route: 'path/04',
                                },
                                {
                                    key: 8,
                                    name: '菜单二-1-2',
                                    route: 'path/05',
                                },
                                {
                                    key: 9,
                                    name: '菜单二-1-3',
                                    route: 'path/06',
                                }
                            ]
                        },
                        {
                            key: 10, name: '菜单二-2', route: 'path/07', children: []
                        },
                        {
                            key: 11, name: '菜单二-3', children: [
                                {key: 12, name: '菜单二-2-1', route: 'path/08'},
                                {key: 13, name: '菜单二-2-2', route: 'path/09'},
                                {key: 14, name: '菜单二-2-3', route: 'path/10'}
                            ]
                        }
                    ]
                },
                {
                    key: 15, icon: 'icon iconfont iconuser', name: '菜单三', route: 'path/11',
                },
                {key: 16, icon: 'icon iconfont iconrenzheng', name: '菜单四', route: 'path/12'},
                {key: 17, name: '菜单五', route: 'path/13'},
                {key: 18, name: '菜单六', route: 'path/14'},
                {key: 19, name: '菜单七', route: 'path/15',},
                {key: 20, name: '菜单八', route: 'path/16',},
                {key: 21, name: '菜单九', route: 'path/17',},
                {key: 22, name: '菜单十', route: 'path/18',},
                {key: 23, name: '菜单十一', route: 'path/19',},
                {key: 24, name: '菜单十二', route: 'path/20',},
                {key: 25, name: '菜单十三', route: 'path/21',},
                {key: 26, name: '菜单十四', route: 'path/22',},
                {key: 27, name: '菜单十五', route: 'path/23',},
                {key: 28, name: '菜单十六', route: 'path/24',},
            ];
            setMenuData(tmpMenuData);
        }, 1000)
    }, []);
    return (
        <SyProLayout defaultSelectedRoute={'path/04'} customHeader={customHeader} menuData={menuData}
                     titleLogo={titleLogo}
                     onMenuItemClick={onMenuItemClick}>
            {/*此处放主体内容*/}
            <ParentCom></ParentCom>
        </SyProLayout>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));