React中如何基于元素截断状态动态添加title属性？

我之前也碰到过类似的情况，refs为空大概率是ref的使用方式不对或者时机没把握好，结合你的需求，给你几个可行的解决方案：

1. 先确认ref的正确使用姿势 #

你提到用ref="shortDiv"然后通过this.shortDiv.current调用，这种字符串ref在React里已经被废弃了，而且在严格模式下很容易出问题，推荐用官方推荐的createRef（类组件）或useRef（函数组件）：

类组件示例 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref实例
    this.shortDivRef = React.createRef();
    this.state = {
      shouldShowTitle: false
    };
  }

  // 判断是否截断的方法
  isTruncated = (element) => {
    if (!element) return false;
    // 滚动宽度大于可视宽度说明文本被截断了
    return element.scrollWidth > element.clientWidth;
  };

  // 组件挂载后和数据更新时检查截断状态
  componentDidMount() {
    this.updateTitleState();
  }

  componentDidUpdate(prevProps) {
    // 只有当长文本变化时才重新检查
    if (prevProps.long_data !== this.props.long_data) {
      this.updateTitleState();
    }
  }

  updateTitleState() {
    const isTruncated = this.isTruncated(this.shortDivRef.current);
    this.setState({ shouldShowTitle: isTruncated });
  }

  render() {
    const { long_data } = this.props;
    const { shouldShowTitle } = this.state;
    return (
      <div 
        className="shortDiv" 
        ref={this.shortDivRef} 
        title={shouldShowTitle ? long_data : undefined}
      >
        {long_data}
      </div>
    );
  }
}

函数组件示例 #

函数组件没有this，必须用useRef钩子来获取DOM元素，同时配合useEffect处理DOM挂载后的逻辑：

import { useRef, useEffect, useState } from 'react';

function YourComponent({ long_data }) {
  const shortDivRef = useRef(null);
  const [shouldShowTitle, setShouldShowTitle] = useState(false);

  const isTruncated = (element) => {
    if (!element) return false;
    return element.scrollWidth > element.clientWidth;
  };

  useEffect(() => {
    // DOM挂载后检查截断状态
    const checkTruncation = () => {
      setShouldShowTitle(isTruncated(shortDivRef.current));
    };

    checkTruncation();
    // 监听窗口 resize，防止容器宽度变化导致截断状态改变
    window.addEventListener('resize', checkTruncation);
    return () => window.removeEventListener('resize', checkTruncation);
  }, [long_data]);

  return (
    <div 
      className="shortDiv" 
      ref={shortDivRef} 
      title={shouldShowTitle ? long_data : undefined}
    >
      {long_data}
    </div>
  );
}

2. 必须确保样式正确设置 #

别忘了你的.shortDiv样式要满足text-overflow: ellipsis的生效条件，缺一不可：

.shortDiv {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  /* 还要给容器设置固定宽度或者最大宽度，否则不会触发截断 */
  width: 200px; 
  /* 或者 max-width: 100%; */
}

3. 为什么你的refs是空对象？ #

• 你用了废弃的字符串ref，这种方式在现代React版本中不会正确挂载到this.refs上；
• 如果是函数组件，你错误地用了this.shortDiv.current，函数组件没有this，必须用useRef创建的变量；
• 组件第一次渲染时，ref的current属性是null，因为DOM还没挂载，所以不能在render阶段直接调用isTruncated，必须等DOM挂载完成后再判断。

内容的提问来源于stack exchange，提问作者roberto tomás