react原生实现折叠面板

1. 需求：已有点击展开和收起功能，需要让展开丝滑一些。

2. 处理方式：动态改变 max-height：0；到max-height:固定值。

通过设置：overflow:hidden; 和 translation:height .3s;达成目的。

3. 优点：解决面板内容是通过display:none到display:block变化时，我们不需要知道确切撑起高度，也能实现高度渐变。

4. 缺点：展开很丝滑，收起很突然。一旦撑开，里边如果还有展开的话，就会hidden。处理中===

5. 代码

   const [serDefHeight,setSerDefHeight] = useState('auto')    
   const changeDefCollapse = (showDefinition)=>{
        // 显示 或隐藏面板
        setShowDefinition(showDefinition)
        // 需要获取变化之后的scrollHeight为当前最大高度
        setTimeout(()=>{
            let height = serDefCollapseDom.current.scrollHeight
            setSerDefHeight(height+'px')
        },0)
    }

 <div  >
     <div   onClick={changeDefCollapse.bind(this,!showDefinition)}>
        这是头,点击头折叠内容
    </div>
     <div 
        ref={serDefCollapseDom} 
        className={styles.collapseContent}  
        style={{ 
            display: showDefinition ? 'block' : 'none' ,
            maxHeight:serDefHeight,
        }}
      >
         这是内容
     </div>
</div>

.collapseContent {
    transition: all 0.3s;
    overflow: hidden;
}

扩展：

已知需要折叠的高度时，可以 直接通过csss实现 https://blog.csdn.net/qq_40095973/article/details/106826065

transition 属性详解 https://blog.csdn.net/qq_43923146/article/details/127510036