我的 react collapse 组件

详见：Doc4k-Collapse

定义 Collapse

JS 实现

import React from 'react';const Collapse = props => {    const collapseRef = useRef(null);    const collapseSection = element => {        const sectionHeight = element.scrollHeight;        requestAnimationFrame(function() {            element.style.height = sectionHeight + 'px';            requestAnimationFrame(function() {                element.style.height = 0 + 'px';            });        });    };    const expandSection = element => {        const sectionHeight = element.scrollHeight;        element.style.height = sectionHeight + 'px';        let clearTime = setTimeout(() => {            element.style.height = 'auto';        }, 400);        clearTimeout(clearTime);    };    useEffect(() => {        const element = collapseRef.current;        if (props.isOpen) {            expandSection(element);        } else {            collapseSection(element);        }    }, [props.isOpen]);    return (        <div className="d-collapse" ref={collapseRef}>            {props.children}        </div>    );};Collapse.defaultProps = {    isOpen: false};export { Collapse };

CSS

.d-collapse{
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

引用Collapse.js

import { Collapse } from '../../../commonComponents/Collapse.js';
const CollapseDemo = props => {
const [isOpen, setIsOpen] = useState(true);        //初始化展开收起，默认收起
const handleToggle = () => {setIsOpen(!isOpen);};  //处理toggle
return (
    <button type="button" className="d-btn d-btn-blue" onClick={handleToggle}>Toggle</button>
    <Collapse isOpen={isOpen}>
        <div> 此处放内容 </div>
    </Collapse>
);}