react移动端监听div的高度变化

在React移动端，如果你想监听一个`div`元素的高度变化，你可以利用React生命周期方法或者第三方库如`react-refetch-dom`来实现。这里提供一种基本的方式：

1. **使用ref**:
首先，你需要创建一个名为`heightRef`的`ref`对象，并将其绑定到`div`组件上。然后，在`componentDidMount`或者`useEffect`钩子里，你可以获取并监听高度变化。

import React, { useRef, useEffect } from 'react';

function MyDiv() {
  const heightRef = useRef(null);

  useEffect(() => {
    function handleScroll() {
      if (heightRef.current) {
        console.log('Height changed:', heightRef.current.offsetHeight);
      }
    }

    // 初始化高度
    handleScroll();

    // 添加滚动事件监听
    heightRef.current.addEventListener('scroll', handleScroll);

    // 清理函数，当组件卸载时移除事件监听
    return () => heightRef.current.removeEventListener('scroll', handleScroll);
  }, []);

  return <div ref={heightRef}>Your content here</div>;
}

export default MyDiv;

2. **使用第三方库**:
如果你想简化处理，可以考虑使用`react-use-dom-state`这样的库，它提供了便捷的方式来订阅DOM属性的变化。

import { useDomState } from 'react-use-dom-state';

function MyDiv() {
  const [height, setHeight] = useDomState({ targetElementId: 'your-div-id', attribute: 'offsetHeight' });

  useEffect(() => {
    // 监听高度变化
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setHeight(entry.target.getAttribute('offsetHeight'));
        }
      });
    });

    // 设置初始值并开始观察
    observer.observe(document.getElementById('your-div-id'));

    // 在组件卸载前移除观察者
    return () => observer.unobserve(document.getElementById('your-div-id'));
  }, []);

  return <div id="your-div-id">Your content here</div>;
}