react实现盒子里边内容过长 添加一个图标点击展开出现纵向滚动条

实现这个功能，可以通过以下步骤：

1. 在盒子中添加一个图标，用来触发展开/收起操作；
2. 设置盒子的高度和 overflow 属性，使其固定高度并出现纵向滚动条；
3. 通过 CSS 动画控制盒子的展开/收起。

具体实现代码如下：

import React, { useState } from "react";

function Box() {
  const [isExpanded, setIsExpanded] = useState(false);

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

  return (
    <div
      style={{
        height: isExpanded ? "auto" : "100px",
        overflowY: "auto",
        border: "1px solid #ccc",
        padding: "10px",
        position: "relative"
      }}
    >
      {isExpanded ? (
        <>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
            suscipit, sapien non bibendum placerat, orci elit placerat nisi, vel
            ultrices massa ex in velit. Nam elit ligula, sodales eget malesuada
            quis, dapibus et purus.
          </p>
          <p>
            Suspendisse sed finibus urna. Aenean sollicitudin, mi et
            condimentum ornare, arcu risus tristique nunc, non egestas nisl
            massa vitae risus. Sed tincidunt lorem vel purus lobortis, vitae
            pharetra quam consequat. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia curae; Nunc at justo
            ullamcorper, tincidunt velit vel, consequat nulla. Morbi non
            tincidunt lacus. Aenean nec lectus vel arcu semper tincidunt sit
            amet a nunc. Donec posuere magna ac dui maximus consequat. Nulla
            sed risus euismod, commodo ante ac, bibendum arcu.
          </p>
        </>
      ) : null}
      <div
        style={{
          position: "absolute",
          bottom: "10px",
          right: "10px"
        }}
        onClick={handleToggle}
      >
        {isExpanded ? (
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M19 13H5v-2h14v2z" />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M7 10l5 5 5-5z" />
          </svg>
        )}
      </div>
    </div>
  );
}

export default Box;

在这个例子中，我们通过 useState hook 来控制盒子的展开/收起状态，点击图标时触发 handleToggle 函数，通过修改 state 来改变盒子的高度。在盒子的样式中，我们设置了固定高度和 overflow 属性来出现纵向滚动条。最后，我们通过绝对定位把图标放在了盒子的右下角，并通过 CSS 控制其样式。