React+TS文本溢出隐藏并显示省略号，移入Tooltip显示全部内容

需求：当div文字内容过多时显示省略号，并且鼠标移入文字区域tooltip显示全部内容；div文字内容没有溢出时鼠标移入不作tooltip。并且随着窗口变化而变化，封装成组件。

思路：传入相关文字内容，用React中ref获取父div和子div宽度，将比较结果存入state，用state控制是否使用tooltip。window监听窗口宽度变化。

因为将子div放在父div里面，取到的宽度就等于父div的宽度（已尝试），没办法知道全部文本的宽度，所以克隆了一份文本来确定文本内容的宽度，但克隆的这份不显示。

效果：

代码：

export const ToolTipEllipsisVisible: FC<{ content: string }> = (props) => {
  const parent = useRef(null)
  const child = useRef(null)
  const [ellipsis, setEllipsis] = useState(false)
  const [width, setWidth] = useState()

//判断文字内容是否超出div宽度
  const onResize = () => {
    const pw = parent.current?.clientWidth
    const cw = child.current?.clientWidth
    if (pw != undefined && cw != undefined) {
      setEllipsis(pw < cw)
    }

  }
  
//监听窗口宽度变化
  const resizeWidth = (e: any) => {
    const w = e.target.innerWidth
    setWidth(w)
  }

  useEffect(() => {
    const w = window.innerWidth
    setWidth(w)
    window.addEventListener("resize", resizeWidth)
    return () => {
      window.removeEventListener("resize", resizeWidth)
    }
  }, [])

  useEffect(() => {
    if (parent.current && child.current) {
      onResize()
    }
  }, [parent.current, child.current,width])

  return (
    <>
      {
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {ellipsis ? (
          
            {props.content}
          
        ) : (
          props.content
        )}
      
克隆的一份（但不显示）文本，用于计算文本内容的真实宽度
      {
          position: "absolute",
          whiteSpace: "nowrap",
          visibility: "hidden",
        }}
      >
        {props.content}
      
    
  )
}

使用：传入一段字符

 item.name)
                            .toString()
                            .replace(/,/g, "/")}
                        />

小白日记，请各位大佬指点