背景：

想实现一个和content等高的侧边栏，并增加侧边栏导航。

ant组件概述

  • Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。
  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
  • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。
  • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。

实现代码：

1、先实现自定义侧边栏的导航组件

// Sidebar.jsimport React from 'react';import { Menu } from 'antd';const Sidebar = () => (<Menumode="inline"defaultSelectedKeys={['1']}style={{ height: '100%', borderRight: 0 }}>选项1选项2选项3);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 = () => (// 自定义函数，用于渲染侧边导航const renderSidebar = () => (<Sider width={200} className="site-layout-background"style={{ backgroundColor: 'white' }}>//自定义组件);<Layout style={{ minHeight: '100vh' }}> {/* 设置最小高度为视口高度 */}
{/* 头部内容 */}
{renderSidebar()} {/* 使用自定义函数渲染侧边导航 */}<Header style={{ backgroundColor: 'grey' }}>Header<Content style={{ margin: '24px 16px 0' }}>Content<Footer style={{ textAlign: 'center' }}>Footer);export default App;

说明：

1、外层的Layout组件设置了minHeight: ‘100vh’，这意味着它会至少占满整个视口的高度

2、内部的Sider和另一个Layout（包含Header、Content、Footer）将会自动填充这个高度，从而实现等高的效果。

3、自定义子组件Sidebar

4、使用自定义函数：renderSidebar是一个自定义函数，它返回一个Sider组件，该组件内部使用了我们定义的Sidebar组件。在Layout结构中，通过调用{renderSidebar()}来渲染侧边导航。