react 中，使用antd layout布局中的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 那套框架时，就可以随意设置。不知道为啥！！不知道有没有大神帮忙解惑.。。。。。。