利用umi3.4的框架引用antd的一个简单的布局

1.先看官网的布局有哪些样式（https://ant.design/components/layout-cn/）

此次我将引用如下的布局：

2.在项目的src目录下新建一个layouts目录，并在该目录下新建一个index.js

因为在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件

所以我们需要把布局的代码写在该index.js中

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  //作用是把其他的.js文件包括在content中，实现其他文件嵌套在该布局中的作用
                    }</Content>
                    <Footer>Footer</Footer>
                </Layout>
            </Layout>
        );
    }
}

export default BasicLayout;

 

打开MyDatePicker.js，效果如下：

另外：

如果我们的某个js文件想套用其他的布局，那么可以在config.js中进行指定（注意：布局默认情况下就是layouts/index.js）

比如我在src目录写了另外一个布局存放在layouts2/index.js文件中，那么就可以通过以下的方式进行引用

routes: [{ 
    path: '/&