React+ES6环境下判断元素文本溢出并添加Tooltip的正确JS实现方式

我来帮你修复现有代码里的问题，同时适配React+ES6的纯JS环境：

先看现有代码的几个核心问题 #

1. 误用了jQuery的innerHeight()方法，纯JS里得换成原生DOM属性
2. document.getElementsByClassName返回的是HTMLCollection，不能直接调用数组的forEach方法
3. 事件绑定里的上下文指向错误，导致this.isElipsed无法正确调用
4. 在React环境下，直接操作DOM要注意时机，必须等组件渲染完成后再执行

修正后的完整实现 #

第一步：修复文本溢出判断函数

替换jQuery方法，用原生JS属性判断文本是否溢出：

// 判断元素是否文本溢出（支持垂直/水平方向的ellipsis）
function isEllipsed(element) {
  // scrollHeight是内容总高度，clientHeight是元素可见高度；水平方向同理
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

第二步：修复事件绑定与DOM遍历逻辑

把HTMLCollection转成数组，同时处理事件监听的绑定与清理：

function handleMouseOver(event) {
  const target = event.target;
  if (isEllipsed(target)) {
    // 添加tooltip相关类（假设你有对应的CSS样式）
    target.classList.add('has-tooltip');
    // 设置title属性作为原生tooltip内容
    target.setAttribute('title', target.textContent.trim());
  } else {
    // 无溢出时清理样式和tooltip
    target.classList.remove('has-tooltip');
    target.removeAttribute('title');
  }
}

function setupEllipsisTooltips() {
  // 将HTMLCollection转为数组，才能使用forEach
  const valueElements = Array.from(document.getElementsByClassName("operation-information__value"));
  
  valueElements.forEach(element => {
    // 先移除旧监听，避免重复绑定
    element.removeEventListener('mouseover', handleMouseOver);
    element.addEventListener('mouseover', handleMouseOver);
  });
}

第三步：在React组件中正确调用

因为React的DOM是动态渲染的，必须在组件挂载完成后再执行DOM操作，用useEffect（函数组件）或者生命周期钩子（类组件）：

函数组件示例：

import { useEffect } from 'react';

function YourInfoComponent() {
  useEffect(() => {
    // 组件挂载后初始化tooltip逻辑
    setupEllipsisTooltips();

    // 组件卸载时清理事件监听，防止内存泄漏
    return () => {
      const valueElements = Array.from(document.getElementsByClassName("operation-information__value"));
      valueElements.forEach(element => {
        element.removeEventListener('mouseover', handleMouseOver);
      });
    };
  }, []); // 空依赖数组表示仅在挂载/卸载时执行

  return (
    <div className="operation-information">
      <span className="operation-information__value">这是一段很长很长可能会触发文本溢出的测试内容，用来验证tooltip逻辑</span>
      <span className="operation-information__value">短文本不会触发tooltip</span>
    </div>
  );
}

// 把之前的isEllipsed、handleMouseOver、setupEllipsisTooltips放在组件内部或外部均可

更符合React风格的优化（用Ref替代类名查询） #

如果不想通过类名查询DOM，可以用React的Ref直接获取元素，更安全：

import { useEffect, useRef } from 'react';

function YourInfoComponent() {
  // 用ref数组存储所有需要判断的span元素
  const valueRefs = useRef([]);

  useEffect(() => {
    valueRefs.current.forEach(element => {
      if (!element) return;
      element.addEventListener('mouseover', handleMouseOver);
    });

    return () => {
      valueRefs.current.forEach(element => {
        if (!element) return;
        element.removeEventListener('mouseover', handleMouseOver);
      });
    };
  }, []);

  return (
    <div className="operation-information">
      <span 
        className="operation-information__value"
        ref={el => valueRefs.current.push(el)}
      >长文本测试内容，会触发tooltip</span>
      <span 
        className="operation-information__value"
        ref={el => valueRefs.current.push(el)}
      >短文本</span>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Marcos Collado