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 

        
            
                我是侧边栏
            
            
                {/* 伸缩按钮 */}
                 setShowSider(!showSider)}>
                    
                
                

                    我是内容噢
                

            
        
    

}

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