背景：

想實(shí)現(xiàn)一個(gè)和content等高的側(cè)邊欄，并增加側(cè)邊欄導(dǎo)航。

ant組件概述

• Layout：布局容器，其下可嵌套?Header?Sider?Content?Footer?或?Layout?本身，可以放在任何父容器中。
• Header：頂部布局，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在?Layout?中。
• Sider：側(cè)邊欄，自帶默認(rèn)樣式及基本功能，其下可嵌套任何元素，只能放在?Layout?中。
• Content：內(nèi)容部分，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在?Layout?中。
• Footer：底部布局，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在?Layout?中。

實(shí)現(xiàn)代碼：

1、先實(shí)現(xiàn)自定義側(cè)邊欄的導(dǎo)航組件

// Sidebar.js
import React from 'react';
import { Menu } from 'antd';const Sidebar = () => (<Menumode="inline"defaultSelectedKeys={['1']}style={{ height: '100%', borderRight: 0 }}><Menu.Item key="1">選項(xiàng)1</Menu.Item><Menu.Item key="2">選項(xiàng)2</Menu.Item><Menu.Item key="3">選項(xiàng)3</Menu.Item></Menu>
);export default Sidebar;

2、在主組件頁面中，引入子組件Sidebar組件

import React from 'react';
import { Layout } from 'antd';
import Sidebar from './Sidebar'; // 引入自定義組件
const { Header, Footer, Sider, Content } = Layout;const App = () => (
// 自定義函數(shù)，用于渲染側(cè)邊導(dǎo)航const renderSidebar = () => (<Sider width={200} className="site-layout-background"style={{ backgroundColor: 'white' }}><Sidebar />  //自定義組件</Sider>);<Layout style={{ minHeight: '100vh' }}> {/* 設(shè)置最小高度為視口高度 */}<Header className="header">{/* 頭部內(nèi)容 */}</Header>{renderSidebar()} {/* 使用自定義函數(shù)渲染側(cè)邊導(dǎo)航 */}<Layout><Header style={{ backgroundColor: 'grey' }}>Header</Header><Content style={{ margin: '24px 16px 0' }}>Content</Content><Footer style={{ textAlign: 'center' }}>Footer</Footer></Layout></Layout>
);export default App;

說明：

1、外層的Layout組件設(shè)置了minHeight: '100vh'，這意味著它會(huì)至少占滿整個(gè)視口的高度

2、內(nèi)部的Sider和另一個(gè)Layout（包含Header、Content、Footer）將會(huì)自動(dòng)填充這個(gè)高度，從而實(shí)現(xiàn)等高的效果。

3、自定義子組件Sidebar

4、使用自定義函數(shù)：renderSidebar是一個(gè)自定義函數(shù)，它返回一個(gè)Sider組件，該組件內(nèi)部使用了我們定義的Sidebar組件。在Layout結(jié)構(gòu)中，通過調(diào)用{renderSidebar()}來渲染側(cè)邊導(dǎo)航。