react中，使用antdlayout布局中的sider做sider的展开和收起功能

一 话不多说，先展示效果：

展开时：

收起时：

二、实现代码如下

react 文件

import React, {useState} from 'react'; import {Layout} from 'antd'; import styles from "./index.module.less"; // 这个是样式文件，实际上里面只有一个button的样式 import foldUrl from "../../../public/btn_fold2.png"; // 这里是按钮中的图片，可以替换成自己的 const {Sider, Content} = Layout; const ScalingTest = () => { const [showSider, setShowSider] = useState(true); const containerLayoutStyle: React.CSSProperties = { borderRadius: "8px", overflow: "hidden", height: "600px" }; const containerSiderStyle: React.CSSProperties = { background: "red", height: "600px", fontSize: "24px", }; const contentStyle: React.CSSProperties = { backgroundColor: "gainsboro", position: "relative", height: "600px", fontSize: "24px", }; return <div style={{padding: 50}}> <Layout style={containerLayoutStyle}> <Sider style={containerSiderStyle} width={showSider ? 300 : 0}> 我是侧边栏 </Sider> <Content style={contentStyle}> {/* 伸缩按钮 */} <button className={styles.closeButton} type={"button"} onClick={() => setShowSider(!showSider)}> <img src={foldUrl} width={4} height={8} alt={"img"} style={{marginLeft: -2, transform: `rotate(${showSider ? 0 : 180}deg)`}}/> </button> <div> 我是内容噢 </div> </Content> </Layout> </div> } export default ScalingTest;

CSS 样式文件：

// 展开、关闭按钮的样式 .closeButton { position: absolute; top: 50%; transform: translate(0, -50%); left: 6px; width: 12px; height: 40px; background: linear-gradient(180deg, #EFEEF5 0%, #F0F1F5 98%); border-radius: 4px 4px 4px 4px; border: 1px solid rgba(255, 255, 255, 0.5); }

三、题外话

        说个题外话，我自己在使用ant desgin pro +umi 那套成熟的框架时，给layout组件设置自定义高度不生效。但是如果不使用ant desgin pro +umi 那套框架时，就可以随意设置。不知道为啥！！不知道有没有大神帮忙解惑.。。。。。。