需求背景:需要实现文本的展开收起效果,文本是一行一行的,数据格式是数组结构。
如图所示(图片已脱敏)
简单实现:使用一个变量控制展开收起效果。
展开收起逻辑部分(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>