今天下班之后把antd大致过了一遍，不得不说，还是挺好用的，前面对于react的知识点，该学习的也在慢慢的学习了，学完之后，打算做一个博客管理系统的后台。这里记录的就是大致的步骤。
1：首先使用一下Layout布局，把整个后台管理系统框架都已经写好了样式了，一下内容参考文档：
2：在home组件里面，新开一个模板，在模板里面引入 Layout布局的等
import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { SubMenu } = Menu; const { Header, Content, Sider } = Layout;
3:引入路由和各个导航子菜组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import Echart from './Echart'; import Parent from './Parent'; import Child from './Child'; import Tab from './Tab'; import Nav from './Nav'; import About from './About'; import News from './News'; import Add from './Add';
4:将跳转的link放在导航菜单里面
<Menu.Item key="1"> <Link to="/echart">统计图</Link></Menu.Item> <Menu.Item key="2"> <Link to="/parent">table统计图</Link></Menu.Item> <Menu.Item key="3"><Link to="/child">树形菜单</Link></Menu.Item>
5:路由设置
在render()里面设置路由
把 Content换成路由指向的右侧的位置
<Route exact path="/echart" component={Echart} /> <Route exact path="/parent" component={Parent} /> <Route exact path="/child" component={Child} /> <Route exact path="/tab" component={Tab} /> <Route exact path="/nav" component={Nav} /> <Route exact path="/news" component={News} /> <Route exact path="/about" component={About} /> <Route exact path="/add" component={Add} />
6：具体代码参考
import React, { Component } from 'react'; import { Layout, Menu, Breadcrumb, Icon } from 'antd'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import Echart from './Echart'; import Parent from './Parent'; import Child from './Child'; import Tab from './Tab'; import Nav from './Nav'; import About from './About'; import News from './News'; import Add from './Add'; const { SubMenu } = Menu; const { Header, Content, Sider } = Layout; class Laytest extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <Router> <Layout> <Header className="header"> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }} > <Menu.Item key="1">nav 1</Menu.Item> <Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="3">nav 3</Menu.Item> </Menu> </Header> <Layout> <Sider width={200} style={{ background: '#fff' }}> <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }} > <SubMenu key="sub1" title={ <span> <Icon type="user" /> 图表相关 </span> } > <Menu.Item key="1"> <Link to="/echart">统计图</Link></Menu.Item> <Menu.Item key="2"> <Link to="/parent">table统计图</Link></Menu.Item> <Menu.Item key="3"><Link to="/child">树形菜单</Link></Menu.Item> </SubMenu> <SubMenu key="sub2" title={ <span> <Icon type="laptop" /> 数据请求 </span> } > <Menu.Item key="5"> <Link to="/parent">表格</Link></Menu.Item> <Menu.Item key="6"> <Link to="/child">树形控件</Link></Menu.Item> <Menu.Item key="7"><Link to="/tab">Tab</Link></Menu.Item> <Menu.Item key="8"><Link to="/nav">Nav</Link></Menu.Item> </SubMenu> <SubMenu key="sub3" title={ <span> <Icon type="notification" /> ant组件 </span> } > <Menu.Item key="9"><Link to="/news">轮播图</Link></Menu.Item> <Menu.Item key="10"><Link to="/about">卡片效果</Link></Menu.Item> <Menu.Item key="11"><Link to="/add">add</Link></Menu.Item> <Menu.Item key="12">option12</Menu.Item> </SubMenu> </Menu> </Sider> <Layout style={{ padding: '0 24px 24px' }}> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>Home</Breadcrumb.Item> <Breadcrumb.Item>List</Breadcrumb.Item> <Breadcrumb.Item>App</Breadcrumb.Item> </Breadcrumb> <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280, }} > <Route exact path="/echart" component={Echart} /> <Route exact path="/parent" component={Parent} /> <Route exact path="/child" component={Child} /> <Route exact path="/tab" component={Tab} /> <Route exact path="/nav" component={Nav} /> <Route exact path="/news" component={News} /> <Route exact path="/about" component={About} /> <Route exact path="/add" component={Add} /> </Content> </Layout> </Layout> </Layout> </Router> ) } } export default Laytest;
好了，一个简单的管理后台的样子都有了，点击不同的子菜单，右侧会显示不同的内容了，根据自己的项目需要去完善不同的组件吧。
