小编Jan*_*ing的帖子

我想以可靠的方式找出 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 之外做整个事情，那么它就可以工作。在控制台中，我看到 0 的 2 倍值，然后是正确的尺寸。

使用效果： …