Ant Design学习(三)

用户1289394

发布于 2023-01-05 20:54:05

3960

发布于 2023-01-05 20:54:05

文章被收录于专栏：Java学习网

2.3.3、子页面使用布局

前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？

首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。

import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
render(){
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>{this.props.children}</Content>
<Footer>Footer</Footer>
</Layout>
</Layout> 
);
}
}
export default BasicLayout;

接下来配置路由（注意，在布局路由下面进行配置）：

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。

export default {
plugins: [
['umi-plugin-react', {
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由
routes: [ //在这里进行配置子页面
{
path: '/myTabs',
component: './myTabs'
}
]
}]
};

进行访问测试：

可以看到，在MyTabs组件中已经应用了全局的布局。其他子页面也就同理了。

2.3.4、美化页面

接下来，对页面做一些美化的工作：

import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
render(){
return (
<Layout>
<Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>
Sider
</Sider>
<Layout>
<Header style={{ background: '#fff', textAlign: 'center', padding:
0 }}>Header</Header>
<Content style={{ margin: '24px 16px 0' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 360
}}>
{this.props.children}
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 黑
马程序员</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;

效果：