logo

函数式组件文字省略提示

Published on
React

1. 应用场景

在Web开发中，我们经常会遇到需要显示提示信息的场景，比如当鼠标悬停在一个元素上时，显示该元素的详细说明。为了实现这样的功能，我们可以使用React来创建一个TooltipWrapper组件。

2. 构建思路

构建TooltipWrapper组件的思路如下：

  1. 导入所需的React、useEffect、useRef和useState等钩子函数，以及antd的Tooltip组件和styled-components库。
  2. 创建一个样式化Tooltip组件，定义了一个名为StyledTooltip的组件，使用styled-components的语法来定义样式。
  3. 创建一个名为TooltipWrapper的函数组件，该组件接受text、fontSize和maxWidth作为属性。
  4. 在组件内部，使用useRef钩子函数来创建一个引用对象spanRef，用于获取span元素的引用。
  5. 使用useState函数创建一个名为showTooltip的状态和其更新函数setShowTooltip，初始值为false。
  6. 使用useEffect钩子函数监听组件属性maxWidth的变化，当maxWidth变化时，获取span元素的宽度，并将宽度与maxWidth进行比较，如果宽度大于maxWidth，则将showTooltip状态设置为true，否则设置为false。
  7. 返回一个包含span元素的StyledTooltip组件。StyledTooltip组件使用title属性来显示悬浮提示文本，如果showTooltip为true，则显示text文本内容，否则不显示。span元素使用ref属性绑定spanRef引用对象，以便在useEffect中获取到span元素的引用。同时根据showTooltip的值动态添加或删除类名truncated，通过设置样式white-space、overflow和text-overflow来实现文本溢出时的省略显示效果。
  8. 最后通过export default导出TooltipWrapper组件，以便在其他文件中使用。

3. 完整代码

javascript
复制代码import React, { useEffect, useRef, useState } from 'react';
import { Tooltip } from 'antd';
import styled from 'styled-components';

const StyledTooltip = styled(Tooltip)`
  .truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;

const TooltipWrapper = ({ text, fontSize, maxWidth }) => {
  const spanRef = useRef(null);
  const [showTooltip, setShowTooltip] = useState(false);

  useEffect(() => {
    const spanElement = spanRef.current;
    if (spanElement) {
      const { width } = spanElement.getBoundingClientRect();
      setShowTooltip(width > maxWidth);
    }
  }, [maxWidth]);

  return (
    <StyledTooltip title={showTooltip ? text : ''}>
      <span ref={spanRef} style={{ fontSize }} className={showTooltip ? 'truncated' : ''}>
        {text}
      </span>
    </StyledTooltip>
  );
};

export default TooltipWrapper;

4. 代码解释

  1. 导入所需的React、useEffect、useRef和useState等钩子函数，以及antd的Tooltip组件和styled-components库。
  2. 创建了一个名为StyledTooltip的样式化Tooltip组件，使用styled-components的语法来定义样式。具体样式设置了文本溢出时的省略显示效果。
  3. 创建了TooltipWrapper函数组件，接收text、fontSize和maxWidth作为属性。
  4. 在组件内部使用useRef钩子函数创建了一个引用对象spanRef，用于获取span元素的引用。
  5. 使用useState函数创建了一个名为showTooltip的状态和其更新函数setShowTooltip，初始值为false。
  6. 使用useEffect钩子函数监听maxWidth属性的变化。当maxWidth变化时，获取span元素的宽度，并将宽度与maxWidth进行比较，如果宽度大于maxWidth，则将showTooltip状态设置为true，否则设置为false。
  7. 返回一个包含span元素的StyledTooltip组件。StyledTooltip组件根据showTooltip的值动态设置title属性：如果showTooltip为true，则显示text文本内容，否则不显示。span元素使用ref属性绑定spanRef引用对象，以便在useEffect中获取到span元素的引用。同时根据showTooltip的值动态添加或删除类名truncated，通过设置样式white-space、overflow和text-overflow来实现文本溢出时的省略显示效果。
  8. 通过export default导出TooltipWrapper组件，以便在其他文件中使用。

5. 组件应用

在适当的地方引入TooltipWrapper组件，并根据需要设置其属性，例如：

jsx
复制代码<TooltipWrapper text="这是一个很长的文本内容" fontSize={16} maxWidth={200} />

这样就可以在页面中显示一个带有悬浮提示的文本框，当文本内容超过设置的最大宽度时，会以省略号的形式显示，并在鼠标悬停时显示完整的文本内容。

🤪 您也可以编辑此页：