React实现多行缩略，包含展开和收起

以下是React实现多行缩略，包含展开和收起的代码示例：

import React, { useState } from "react";

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

  const toggleExpand = () => setIsExpanded(!isExpanded);

  const shouldTruncate = text.split("\n").length > maxLines;

  return (
    <div>
      <div
        style={{
          overflow: "hidden",
          display: "-webkit-box",
          WebkitBoxOrient: "vertical",
          WebkitLineClamp: maxLines,
        }}
      >
        {text}
      </div>
      {shouldTruncate && (
        <button onClick={toggleExpand}>
          {isExpanded ? "收起" : "展开"}
        </button>
      )}
    </div>
  );
};

export default TextTruncate;

在这个例子中，我们使用useState钩子来跟踪当前文本是否已展开。我们还定义了一个toggleExpand函数，用于切换展开和收起状态。

我们使用CSS属性来实现文本截断。我们设置overflow为hidden，使文本溢出隐藏，并使用-webkit-box属性来定义一个垂直方向上的弹性盒子。我们可以使用WebkitLineClamp属性来限制文本的行数。

最后，我们使用一个条件来显示展开和收起按钮，仅当文本超过指定的行数时。我们使用button元素来呈现按钮，并在单击时调用toggleExpand函数。

你可以使用以下代码片段来渲染TextTruncate组件：

<TextTruncate text={longText} maxLines={3} />

在这个例子中，我们将一个长文本字符串作为文本传递给TextTruncate组件，并将maxLines属性设置为3。这将限制文本的行数为3行，并在需要时显示展开和收起按钮。