可以使用 React 的 useEffect 钩子和 useRef 钩子，搭配 ResizeObserver 来实现监听元素高度的变化，当元素高度变化时在回调函数中执行我们的业务逻辑。
简单示例
示例代码如下：
import React, { useEffect, useRef } from 'react';
const Component = () => {
const elementRef = useRef(null);
useEffect(() => {
const element = elementRef.current;
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
console.log('元素高度变化：', entry.contentRect.height);
}
});
observer.observe(element);
return () => observer.unobserve(element);
}, []);
return <div ref={elementRef}>监听元素的高度变化</div>;
;
ResizeObserver 介绍
ResizeObserver 接口监视元素内容盒或边框盒或者SVG元素边界尺寸的变化。
ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。
API
-
ResizeObserver.disconnect()：取消特定观察者目标上所有对元素的监听。
-
ResizeObserver.observe()：开始对指定元素的监听。
-
ResizeObserver.unobserve()：结束对指定元素的监听。
兼容性
兼容性良好，各浏览器兼容性如下图所示：
