ant design pro（二）布局

一、概述

　　參看地址：https://pro.ant.design/docs/layout-cn

　　其實在上述地址ant-design上已經有詳細介紹，本文知識簡述概要。

　　頁面整體布局是一個產品最外層的框架結構，往往會包含導航、頁腳、側邊欄、通知欄以及內容等。在頁面之中，也有很多區塊的布局結構。Ant Design 目前提供了兩套布局方案：Layout 和 Grid 。

二、布局

2.1、根據不同場景區分抽離布局組件

　　在大部分場景下，我們需要基於上面兩個組件封裝一些適用於當下具體業務的組件，包含了通用的導航、側邊欄、頂部通知、頁面標題等元素。例如 Ant Design Pro 的 BasicLayout。

　　通常，我們會把抽象出來的布局組件，放到跟 routes、 components 平行的 layouts 文件夾中方便管理。需要注意的是，這些布局組件和我們平時使用的其它組件並沒有什么不同，只不過功能性上是為了處理布局問題。

2.2、處理 this.props.children 屬性

　　在抽離的過程中，往往需要處理布局包含的內容組件，而 this.props.children 就代表了標簽中的內容，如果你需要對其子元素進行篩選處理，可以使用 React.children.forEach 方法。

2.3、Ant Design Pro 的布局

在 Ant Design Pro 中，我們抽離了使用過程中的通用布局，都放在 layouts 目錄中，分別為：

　　BasicLayout：基礎頁面布局，包含了頭部導航，側邊欄和通知欄：

　　BlankLayout：空白的布局、

　　PageHeaderLayout：帶有標准 PageHeader 的布局

　　UserLayout：抽離出用於登陸注冊頁面的通用布局

2.4、如何使用 Ant Design Pro 布局

　　我們為了統一方便的管理路由和頁面的關系，將配置信息統一抽離到 src/common/router.js 下，同時應用動態路由，通過如下配置：

const routerConfig = {
  '/': {
    component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
  },
  '/dashboard/analysis': {
    component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
  },
  '/user': {
    component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
  },
  '/user/login': {
    component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),
  },
};

映射路由和頁面布局（組件）的關系。詳細的映射轉換實現，參看 router.js。