react 点击展开更多 组件

你可以使用 React Hooks 来实现一个点击展开更多的组件。下面是一个简单的示例代码：

import React, { useState } from "react";

function ExpandableText({ text, maxLength }) {
  const [isExpanded, setIsExpanded] = useState(false);

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

  if (text.length <= maxLength) {
    return <p>{text}</p>;
  }

  if (!isExpanded) {
    return (
      <>
        <p>{text.slice(0, maxLength)}...</p>
        <button onClick={toggleExpand}>展开</button>
      </>
    );
  }

  return (
    <>
      <p>{text}</p>
      <button onClick={toggleExpand}>收起</button>
    </>
  );
}

export default ExpandableText;

使用该组件时，你可以传入 `text` 和 `maxLength` 两个 props，`text` 表示要展示的文本内容，`maxLength` 表示要展示的最大字符数。当文本内容超过最大字符数时，会显示部分文本和一个“展开”按钮，点击该按钮可以展开/收起全部文本内容。