Javascript 如果CSS省略号在React组件中处于活动状态，如何有条件地显示标题工具提示

问题：

我正在寻找一种干净的方式，在应用了CSS省略号的项目上显示标题工具提示。（在反应组件内）

我所尝试的：

我设置了一个ref，但它在componentDidUpdate之前不存在，所以在componentDidUpdate中我强制更新。（这需要更多的返工来处理道具的更改等，我可能会使用setState来代替。）这种方法很有效，但我觉得有很多警告是不可接受的

设置状态/强制更新-可能这是一个必要的错误

如果浏览器大小改变怎么办？每次调整大小时是否需要重新渲染？我想我也需要在上面涂上一层。恶心

问题：

有没有更优雅的方式来实现这个目标

半功能MCVE:

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
this.element=React.createRef（）；
}
componentDidMount（）{
这个.forceUpdate（）；
}
doesTextFit=（）=>{
如果（！this.element）返回false；
如果（！this.element.current）返回false；
console.log(
"***",
“网外宽度：”，
this.element.current.offsetWidth，
“滚动宽度：”，
this.element.current.scrollWidth，
“是否合适？”，
this.element.current.scrollWidth因为很多人仍然在看这个问题。我最终找到了解决方法。我会尝试在某个时候将其改写为一个工作示例，但这里是要点

// Setup a ref
const labelRef = useRef(null);

// State for tracking if ellipsis is active
const [isEllipsisActive, setIsEllipsisActive] = useState(false);

// Setup a use effect
useEffect(() => {
    if(labelRef?.current?.offsetWidth < labelRef?.current?.scrollWidth) {
        setIsEllipsisActive(true);
    }
}, [labelRef?.current, value, isLoading]); // I was also tracking if the data was loading

// Div you want to check if ellipsis is active
<div ref={labelRef}>{value}</div>

//设置一个ref
const labelRef=useRef（null）；
//如果省略号处于活动状态，则为跟踪状态
const[isEllipsisActive，setIsEllipsisActive]=useState（false）；
//设置使用效果
useffect（（）=>{
if（labelRef？当前？偏移网络宽度