react折叠组件

本人已参与「新人创作礼」活动，一起开启掘金创作之路

没错，又是需求驱动我去自定义组件的一天，该功能是一个折叠功能。

废话不多说，上代码

import * as React from 'react'
import { useCallback, useEffect } from 'react'
export const Flox = (props: { title: string, children: any }) => {
    let dom: any = null
    let dom_one: any = null
    const click = useCallback(() => {
        let time: any = null
        return () => {
            if (time != null) return//防止重复触发
            if (dom.offsetHeight <= 0) {
                time = setInterval(() => {
                    if (dom.offsetHeight >= dom_one.offsetHeight) {
                        clearInterval(time)
                        time=null
                        return
                    }
                    dom.style.height = dom.offsetHeight + Number(30) + 'px'
                }, 30)
            } else {
                time = setInterval(() => {
                    if (dom.offsetHeight <= 0) {
                        clearInterval(time)
                        time=null
                        return
                    }
                    dom.style.height = dom.offsetHeight - Number(30) + 'px'
                }, 30)
            }
        }
    }, [])
    return (<>
        <div onClick={click()}>{props.title}</div>
        <div ref={(node)=>dom=node} style={{ height: '0px', overflow: 'hidden' }}>
            <div ref={(node) => dom_one = node} >
                {props.children}
            </div>
        </div>
    </>)
}

接收2个参数，一个是显示的内容，也就是title，还有一个是隐藏的内容children

为了防止在动画还没结束疯狂点击，只能使用类似防抖的功能，只不过防抖是触发第一次，而该功能是只触发第一次，因为react函数组件每一次执行都是重新创建的，所以需要usecallback该hook来缓存该功能

好了，今天就这个简单的需求而已