背景:
想实现一个和content等高的侧边栏,并增加侧边栏导航。
ant组件概述
Layout
:布局容器,其下可嵌套Header
Sider
Content
Footer
或Layout
本身,可以放在任何父容器中。Header
:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在Layout
中。Sider
:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在Layout
中。Content
:内容部分,自带默认样式,其下可嵌套任何元素,只能放在Layout
中。Footer
:底部布局,自带默认样式,其下可嵌套任何元素,只能放在Layout
中。
实现代码:
1、先实现自定义侧边栏的导航组件
// 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">选项1</Menu.Item><Menu.Item key="2">选项2</Menu.Item><Menu.Item key="3">选项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 = () => (
// 自定义函数,用于渲染侧边导航const renderSidebar = () => (<Sider width={200} className="site-layout-background"style={{ backgroundColor: 'white' }}><Sidebar /> //自定义组件</Sider>);<Layout style={{ minHeight: '100vh' }}> {/* 设置最小高度为视口高度 */}<Header className="header">{/* 头部内容 */}</Header>{renderSidebar()} {/* 使用自定义函数渲染侧边导航 */}<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组件设置了minHeight: '100vh',这意味着它会至少占满整个视口的高度
2、内部的Sider和另一个Layout(包含Header、Content、Footer)将会自动填充这个高度,从而实现等高的效果。
3、自定义子组件Sidebar
4、使用自定义函数:renderSidebar是一个自定义函数,它返回一个Sider组件,该组件内部使用了我们定义的Sidebar组件。在Layout结构中,通过调用{renderSidebar()}来渲染侧边导航。