前端实现展开收起的效果 (react)

需求背景：需要实现文本的展开收起效果，文本是一行一行的，数据格式是数组结构。
如图所示（图片已脱敏）

简单实现：使用一个变量控制展开收起效果。

展开收起逻辑部分（react）

 const [fold, setFold] = useState(false);

  /** 展开收起 */
  const handleFold = () => {
    setFold(!fold);
  }
1
2
3
4
5
6

jsx 部分：

 <Descriptions.Item label="证书备用名称">
    <>
       {
       	// 展开时展示全部数组内容，收起时只展示前5项
         (fold ? sansData : sansData.slice(0, 5)).map((item, index) => {
           return (
             <div key={index}>
             	{item}
             </div>
           )
         })
       }
       // 控制文本展示
       {sansData.length > 5 &&
         <div style={{ color: '#1890ff', cursor: 'pointer' }} onClick={handleFold}>
           {fold ? <span><UpOutlined />收起</span> : '... 查看全部'}
         </div>
       }
     </> 
</Descriptions.Item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20