二级菜单，部分

components/Collapse.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
  * @returns
  */
 const Collapse = props => {
-  const collapseRef = React.useRef(null)
+  const { collapseRef } = props
+  const ref = React.useRef(null)
   const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        ref.current.style.height = ref.current.scrollHeight
+        ref.current.style.height = 'auto'
+      }
+    }
+  })
+
   /**
-   * 折叠
-   * @param {*} element
-   */
+     * 折叠
+     * @param {*} element
+     */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
   }
 
   /**
-   * 展开
-   * @param {*} element
-   */
+     * 展开
+     * @param {*} element
+     */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
     clearTimeout(clearTime)
   }
 
-  const updateHeight = () => {
-    collapseRef.current.style.height = 'auto'
-  }
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.isOpen) {
-      expandSection(collapseRef.current)
+      expandSection(ref.current)
     } else {
-      collapseSection(collapseRef.current)
+      collapseSection(ref.current)
     }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
   }, [props.isOpen])
 
   return (
-    <div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
-      {props.children}
-    </div>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+            {props.children}
+        </div>
   )
 }
 Collapse.defaultProps = { isOpen: false }