diff --git a/components/Collapse.js b/components/Collapse.js index dd36f14f..c29dc386 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -2,13 +2,18 @@ import { useEffect, useImperativeHandle, useRef } from 'react' /** * 折叠面板组件,支持水平折叠、垂直折叠 - * @param {type:['horizontal','vertical'],isOpen} props + * @param {type:['horizontal','vertical'], isOpen} props * @returns */ -const Collapse = props => { - const { collapseRef } = props +const Collapse = ({ + type = 'vertical', + isOpen = false, + children, + onHeightChange, + className, + collapseRef +}) => { const ref = useRef(null) - const type = props.type || 'vertical' useImperativeHandle(collapseRef, () => { return { @@ -17,7 +22,7 @@ const Collapse = props => { * @param {*} param0 */ updateCollapseHeight: ({ height, increase }) => { - if (props.isOpen) { + if (isOpen) { ref.current.style.height = ref.current.scrollHeight ref.current.style.height = 'auto' } @@ -76,18 +81,18 @@ const Collapse = props => { } useEffect(() => { - if (props.isOpen) { + if (isOpen) { expandSection(ref.current) } else { collapseSection(ref.current) } // 通知父组件高度变化 - props?.onHeightChange && - props.onHeightChange({ + onHeightChange && + onHeightChange({ height: ref.current.scrollHeight, - increase: props.isOpen + increase: isOpen }) - }, [props.isOpen]) + }, [isOpen]) return (