推荐阅读官方文档
https://zh-hans.reactjs.org/docs/hooks-intro.html

• useRef/useState

//使用hooks中的方法封装 Ellipsis 组件
import React, { useState, useRef } from 'react';
import { Tooltip } from 'antd';
import './Ellipsis.less';
export default function Ellipsis(props) {
  const ele = useRef(null);
  const [visible, setVisible] = useState(false);
  const handleMouseEnter = () => {
    if (ele.current.clientWidth < ele.current.scrollWidth) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  };
  return (
    <Tooltip title={props.title} visible={visible} trigger="hover">
      <div
        className="ellipsis"
        ref={ele}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={() => setVisible(false)}
      >
        {props.children}
      </div>
    </Tooltip>
  );
}

参考资料

React Hooks全面理解教程