在 React 中通过 getBoundingClientRect 接收元素的尺寸

我想以可靠的方式找出 DOM 元素的尺寸。

我的考虑是使用 getBoundingClientRect 来实现此目的。

  const elementRef = useRef<HTMLUListElement | null>(null);
  const [dimensions, setDimensions] = useState<DOMRect | undefined>();

  const element: HTMLUListElement | null = elementRef.current;

  /**
   * Update dimensions state.
   */
  const updateDimensions = useCallback(() => {
    if (!element) return;

    setDimensions(element.getBoundingClientRect());
  }, [element, setDimensions]);

  /**
   * Effect hook to receive dimensions changes.
   */
  useEffect(() => {
    if (element) {
      updateDimensions();
    }
  }, [element, updateDimensions]);

这种方法的问题是 useEffect 只对 elementRef.current 做出反应，而不对 rect 更改做出反应。显然，浏览器中组件的绘制尚未完成，因为尺寸始终为 0。

如果我在 useEffect 之外完成所有操作，那么它就会起作用。在控制台中，我看到 2 次值为 0，然后是正确的尺寸。

与useEffect：

外部使用效果：

但是，我想保存状态中的维度，为此我需要 useEffect。

如何使用 getBoundingClientRect 实现此目的，或者是否有其他方法可以实现此目的？

SOLUTION

这不是自己反应的问题。这是 ionic V5 React 中的一个错误。

通常你可以这样做：

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

但这里有一个问题：

https://github.com/ionic-team/ionic/issues/19770 https://github.com/ionic-team/ionic/issues/19770

我的解决方案是使用：https://github.com/que-etc/resize-observer-polyfill https://github.com/que-etc/resize-observer-polyfill

import { RefCallback, useCallback, useState } from 'react';
import ResizeObserver from 'resize-observer-polyfill';


export function useDimensions(): [RefCallback<HTMLElement | null>, DOMRect | undefined] {
  const [dimensions, setDimensions] = useState<DOMRect | undefined>();

  const ref: RefCallback<HTMLElement | null> = useCallback((node: HTMLElement | null) => {
    if (node) {
      setDimensions(node.getBoundingClientRect().toJSON());

      const resizeObserver = new ResizeObserver((entries) => {
        if (entries.length) {
          setDimensions(entries[0].target.getBoundingClientRect().toJSON());
        }
      });

      resizeObserver.observe(node);

      return () => {
        resizeObserver.unobserve(node);
        resizeObserver.disconnect();
      };
    }
  }, []);

  return [ref, dimensions];
}

您可以使用 callBackRef 来实现所需的行为：

import React, { useCallback, useState } from "react";

export default function App() {
  const [dimensions, setDimensions] = useState(null);

  const callBackRef = useCallback(domNode => {
    if (domNode) {
      setDimensions(domNode.getBoundingClientRect());
    }
  }, []);

  return (
    <div>
      <h1 ref={callBackRef}>Measure me</h1>
    </div>
  );
}`