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

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

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

展开收起逻辑部分（react）

 const [fold, setFold] = useState(false);/** 展开收起 */const handleFold = () => {setFold(!fold);}

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>