reactjs - React 仅针对有省略号的文本显示 Material-UI 工具提示

Question

寻找一种方法，让material-ui的工具提示在表格单元格中的文本仅展开，前提是文本被省略号截断(溢出)。

目前在我的表格中有一个像这样的单元格:

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

我的descriptionCell样式是这样的:

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

这使得文本在该表中的行为方式符合我希望的方式，但我希望能够悬停并在工具提示中查看其余部分，最好是 Material-UI 的内置工具提示组件。

我知道这里有一个包 https://www.npmjs.com/package/react-ellipsis-with-tooltip应该可以做到这一点，但它使用引导工具提示，而不是 Material UI。

Answer 1

离开@benjamin.keen 的回答。这是一个独立的功能组件，它只是他的答案的扩展，使用钩子(Hook)来执行比较功能。

import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
const OverflowTip = props => {
  // Create Ref
  const textElementRef = useRef();

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    console.log('compare: ', compare);
    setHover(compare);
  };

  // compare once and add resize listener on "componentDidMount"
  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  // remove resize listener again on "componentWillUnmount"
  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  // Define state and function to update the value
  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.value}
      interactive
      disableHoverListener={!hoverStatus}
      style={{fontSize: '2em'}}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        }}
      >
        {props.someLongText}
      </div>
    </Tooltip>
  );
};

export default OverflowTip;