浅析react里面如何封装一个通用的Ellipsis组件

import React, { FC, useCallback, useLayoutEffect, useRef, useState } from 'react';
import { Tooltip } from 'antd';
import debounce from 'lodash/debounce';
import useDimensions from 'react-cool-dimensions';
import { TooltipProps } from 'antd/lib';


interface EllipsisProps {
  line?: number
  style?: React.CSSProperties
  children?: React.ReactElement
}
const Ellipsis: FC<EllipsisProps & TooltipProps> = (props) => {
  const {
    children,
    line = 1,
    style: currentStyle = {},
    ...other
  } = props;
  const wrapper = useRef<HTMLElement>();
  const [showPopover, setShowPopover] = useState(false);
  // 先设置overflow: 'hidden', 这样超出了才能进行比较
  const defaultStyle: React.CSSProperties = line === 1 ? {
    display: 'block',
    maxWidth: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    ...currentStyle
  } : {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: line,
    ...currentStyle
  }
  const validShowPopover = () => {
    // 当line为1的时候，比较width
    // 否则，比较height
    const {
      scrollWidth = 0,
      clientWidth = 0,
      scrollHeight = 0,
      clientHeight = 0
    } = wrapper.current as HTMLElement || {};
    setShowPopover(scrollWidth > clientWidth || scrollHeight > clientHeight)
  }
  const debounceMesaure = useCallback(debounce(() => {
    validShowPopover();
  }, 200), [validShowPopover]);
  // 支持resize
  const { observe } = useDimensions({
    onResize: debounceMesaure,
  });
  useEffect(() => {
    validShowPopover();
  }, []);

  const renderChildren = () => {
    return React.cloneElement(children, {
      style: defaultStyle,
      ref: (element: HTMLElement | undefined) => {
        observe(element);
        wrapper.current = element;
      },
    })
  }
  // 基于ant的Tooltip组件
  if (showPopover) {
    return <Tooltip {...other}>{renderChildren()}</Tooltip>
  }
  return renderChildren();
}

export default Ellipsis

import Ellipsis from './Ellipsis';
const EllipsisPage = () => {
  return <div>
    <Ellipsis style={{ width: 200 }} title={text} line={2}>
      <span>{text}</span>
    </Ellipsis>
  </div>
}

export default EllipsisPage;

import Ellipsis from './Ellipsis';
const EllipsisPage = () => {
  return <div>
    <div style={{ width: 200 }}>
      <Ellipsis title={text} line={1}>
        <span>{text}</span>
      </Ellipsis>
    </div>
  </div>
}

export default EllipsisPage;