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<HTMLDivElement>(null)
  const child = useRef<HTMLDivElement>(null)
  const [ellipsis, setEllipsis] = useState<boolean>(false)
  const [width, setWidth] = useState<number>()

//判断文字内容是否超出div宽度
  const onResize = () => {
    const pw = parent.cur