React中固定尺寸Div内容溢出时，如何检测并条件应用Tooltip？

方法一：利用Ref结合DOM API判断 #

给目标容器div创建Ref，在组件挂载或内容更新后，通过对比元素的DOM属性判断是否溢出：

• 水平溢出：scrollWidth > clientWidth
• 垂直溢出：scrollHeight > clientHeight

示例代码：

import { useRef, useState, useEffect } from 'react';
import Tooltip from './Tooltip'; // 替换为你的Tooltip组件

function OverflowAwareDiv({ content }) {
  const containerRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  const checkOverflow = () => {
    if (!containerRef.current) return;
    const { scrollWidth, clientWidth } = containerRef.current;
    setIsOverflowing(scrollWidth > clientWidth);
  };

  useEffect(() => {
    checkOverflow();
    // 监听窗口尺寸变化，防止容器宽度改变导致溢出状态变化
    window.addEventListener('resize', checkOverflow);
    return () => window.removeEventListener('resize', checkOverflow);
  }, [content]); // 内容更新时重新检测

  return (
    <div 
      ref={containerRef}
      style={{ 
        width: '200px', 
        whiteSpace: 'nowrap', 
        overflow: 'hidden', 
        textOverflow: 'ellipsis' 
      }}
    >
      {isOverflowing ? <Tooltip content={content}>{content}</Tooltip> : content}
    </div>
  );
}

方法二：用ResizeObserver监听容器尺寸变化 #

如果容器尺寸由父组件动态控制（而非窗口resize），用ResizeObserver能更精准地监听容器自身的尺寸变化，避免遗漏检测场景。

示例代码：

import { useRef, useState, useEffect } from 'react';
import Tooltip from './Tooltip';

function OverflowAwareDiv({ content }) {
  const containerRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  const checkOverflow = () => {
    if (!containerRef.current) return;
    const { scrollWidth, clientWidth } = containerRef.current;
    setIsOverflowing(scrollWidth > clientWidth);
  };

  useEffect(() => {
    checkOverflow();
    const observer = new ResizeObserver(checkOverflow);
    containerRef.current && observer.observe(containerRef.current);

    return () => observer.disconnect();
  }, [content]);

  return (
    <div 
      ref={containerRef}
      style={{ 
        width: '200px', 
        whiteSpace: 'nowrap', 
        overflow: 'hidden', 
        textOverflow: 'ellipsis' 
      }}
    >
      {isOverflowing ? <Tooltip content={content}>{content}</Tooltip> : content}
    </div>
  );
}

额外注意事项 #

• 若内容包含异步加载元素（如图片），需在元素加载完成后触发checkOverflow，比如给图片添加onLoad={checkOverflow}。
• 避免在每次render时执行检测逻辑，借助useEffect或useCallback包裹，减少不必要的性能消耗。
• 若使用第三方UI库的Tooltip组件（如Ant Design、Material-UI），可直接将isOverflowing作为触发条件（比如AntD的visible={isOverflowing}）。

内容的提问来源于stack exchange，提问作者aryan singh