js实现类似查看更多的功能

实现效果

在处理错误信息提示时，如果信息太多，一次性展示的话，看着很乱，那有没有更好的展示方式呢？

经过一番讨论，找到了类似于某乎上的这种效果，如下图：

既能告诉用户后续还有信息，也没有一下子显示全部，给人感觉很累赘。

该如何实现呢？

实现思路

根据上述需求，大概的想法如下：

• 首先页面需要两个容器，这里简称div吧，一个div用来展示数据，一个div用来放按钮
• 展示数据的div默认高度固定，当内容超过高度时，隐藏（overflow-y:hidden）
• 按钮默认情况下需要展示，并且当用户点击按钮后，按钮消失
• 点击按钮后，展示数据的div高度重新设置为自适应高度

最终实现

封装组件

js代码

import React, { useState } from 'react';
import styles from './LookMore.less';
interface ILookMore {
  content: string;
}
const LookMore: React.FC<ILookMore> = (props) => {
  const { content }