See:Doc4k-Collapse



Define the Collapse

JS implementation

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 };Copy the code

CSS

.d-collapse{ overflow: hidden; Transition: height 300ms Cubic - Bezier (0.4, 0, 0.2, 1) 0ms; }Copy the code

Refer to the Collapse. Js

import { Collapse } from '.. /.. /.. /commonComponents/Collapse.js';
const CollapseDemo = props => {
const [isOpen, setIsOpen] = useState(true); Const handleToggle = () => {const handleToggle = () => {setIsOpen(! isOpen); }; Toggle / / processingreturn (
    <button type="button" className="d-btn d-btn-blue"OnClick ={handleToggle}>Toggle</ Collapse isOpen={isOpen}> <div> </Collapse>); }Copy the code