标签: react-resize-observer

我尝试测试使用ResizeObserver. 另外，我需要检查元素是否溢出或调整大小后没有溢出。于是我写了这样一个决定：

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

export default function useOverflowCheck(ref) {
  const [isOverflowing, setIsOverflowing] = useState(false);

  const isOverflow = current => {
    if (current) {
      const hasOverflowX = current.offsetWidth < current.scrollWidth;
      const hasOverflowY = current.offsetHeight < current.scrollHeight;

      setIsOverflowing(hasOverflowX || hasOverflowY);
    }
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useLayoutEffect(() => {
    const element = ref.current;

    const resizeObserver = new ResizeObserver(entries => {
      entries && entries.length && isOverflow(entries[0].target);
    });

    if (element) {
      resizeObserver.observe(element);
      return () …

就像标题的描述一样。在我的反应应用程序中有警告。

系统：Mac OS Big Sur 11.2

环境： Chrome 89.0.4389.90\xef\xbc\x88\xe6\xad\xa3\xe5\xbc\x8f\xe7\x89\x88\xe6\x9c\xac\xef\xbc\x89 (x86_64)