React：巧用多行文本展开收起组件，让你的项目如虎添翼

打造出色的 React 多行文本展开收起组件

在当今用户注意力日益分散的数字世界中，优化用户界面 (UI) 至关重要。为了提升用户体验，巧妙地处理多行文本至关重要。在本教程中，我们将踏上一个循序渐进的旅程，学习如何构建一个功能齐全的 React 多行文本展开收起组件。

1. 绘制基础：文本折叠与省略号

首先，我们需要建立组件的基础，将多行文本折行并添加省略号。为了实现这一目标，我们可以使用 CSS 的 text-overflow 属性，它允许我们指定文本溢出容器时应如何处理。通过设置 overflow: hidden，我们可以隐藏超出容器范围的文本，而 white-space: nowrap 可防止文本换行。

const TextFold = ({ text, maxLines }) => {
  return (
    <div className="text-fold-container">
      <p className="text-fold" style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
        {text}
      </p>
    </div>
  );
};

2. 定位展开收起按钮

下一步是定位展开收起按钮，它将充当文本折叠和展开的触发器。为此，我们可以使用 CSS 的 position 属性，并使用 top 和 right 属性精确定位按钮。

const TextFold = ({ text, maxLines }) => {
  return (
    <div className="text-fold-container">
      <p className="text-fold" style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
        {text}
      </p>
      <button className="text-fold-button" style={{ position: "absolute", top: "0", right: "0" }}>
        展开/收起
      </button>
    </div>
  );
};

3. 掌控展开和收起

现在，让我们为我们的组件注入交互性。我们将使用 React 的 useState Hook 来管理组件的状态，当用户点击展开收起按钮时，我们将更新状态以在文本的显示状态之间切换。

const TextFold = ({ text, maxLines }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleClick = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="text-fold-container">
      <p className="text-fold" style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
        {isExpanded ? text : text.slice(0, maxLines * 18) + "..."}
      </p>
      <button className="text-fold-button" style={{ position: "absolute", top: "0", right: "0" }} onClick={handleClick}>
        {isExpanded ? "收起" : "展开"}
      </button>
    </div>
  );
};

4. 根据行数显示按钮

对于只有几行的文本，显示展开收起按钮可能会显得累赘。为了解决这个问题，我们可以添加一个条件判断，只有在文本行数大于指定值时才显示按钮。

const TextFold = ({ text, maxLines }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleClick = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="text-fold-container">
      <p className="text-fold" style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
        {isExpanded ? text : text.slice(0, maxLines * 18) + "..."}
      </p>
      {text.split("\n").length > maxLines && (
        <button className="text-fold-button" style={{ position: "absolute", top: "0", right: "0" }} onClick={handleClick}>
          {isExpanded ? "收起" : "展开"}
        </button>
      )}
    </div>
  );
};

5. 拥抱灵活性和风格

我们的组件现在已经准备就绪，可以按照需要进行定制。你可以通过修改 CSS 样式来调整文本折叠和展开按钮的外观和位置，使其与应用程序的整体设计相匹配。

.text-fold-container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.text-fold {
  font-size: 16px;
  line-height: 1.5rem;
}

.text-fold-button {
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

常见问题解答

1. 如何调整展开后的文本高度？

为了调整展开后的文本高度，可以修改 .text-fold 样式的 height 属性。

2. 如何在文本折叠时显示自定义消息？

可以在 .text-fold 样式的 content 属性中指定自定义消息。

3. 如何禁止展开收起功能？

可以通过将 isExpanded 状态始终设置为 false 来禁用展开收起功能。

4. 如何在文本折叠时更改省略号的样式？

可以通过修改 .text-fold 样式的 text-overflow-style 属性来更改省略号的样式。

5. 如何使用组件的展开收起状态？

可以使用 isExpanded 状态来控制其他 UI 元素，例如禁用按钮或显示附加信息。

结语

构建一个 React 多行文本展开收起组件并不复杂。通过遵循本教程中的步骤，你可以轻松创建定制、交互性和用户友好的解决方案。通过实施文本折叠、省略号显示、按钮定位、展开收起功能以及根据行数显示按钮，你可以显著提升应用程序的用户体验。此外，利用提供的代码示例，你可以立即将组件集成到你的 React 项目中，享受无缝的多行文本处理。