检测元件参考高度变化

Question

是否可以检测元素引用何时改变其高度？我尝试使用以下内容，但是当元素的高度由于某种原因发生变化时，不会检测到该变化。（请考虑这也必须在 IE11 中工作）

useEffect(() => {
  // detect change in reference height
}, [elementRef])

Answer 1

我注意到另一个答案提到使用ResizeObserver，但答案不完整，所以我想添加我自己的答案。

使用 useEffect

您可以创建一个ResizeObserverinside a useEffect-hook，然后在元素更改其大小时执行您想要执行的操作。resizeObserver请记住在清理功能中断开连接。

useEffect(() => {
  if (!elementRef.current) return;
  const resizeObserver = new ResizeObserver(() => {
    // Do what you want to do when the size of the element changes
  });
  resizeObserver.observe(elementRef.current);
  return () => resizeObserver.disconnect(); // clean up 
}, []);

使用 useCallback

正如评论中提到的，也可以使用useCallback代替useEffect.

您可以创建一个ResizeObserverinside a useCallback-hook，然后在元素更改其大小时执行您想要执行的操作。React 有一个关于如何测量 DOM 节点的示例。

const elementRef = useCallback(node => {
  if (!node) return;
  const resizeObserver = new ResizeObserver(() => { 
    // Do what you want to do when the size of the element changes
  });
  resizeObserver.observe(node);
}, []);

Answer 2

可能的解决方案是使用 React Refs。尝试这个例子作为参考：

export default function Home() {
  const divRef = createRef()
  // ...
  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <div
        ref={divRef} // ...
      ></div>
    </div>
  )
}

详细代码在这里。