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

yqdidy2023-09-12 23:24

需求背景：需要实现文本的展开收起效果，文本是一行一行的，数据格式是数组结构。

如图所示（图片已脱敏）

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

展开收起逻辑部分（react）

javascript 复制代码

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

  /** 展开收起 */
  const handleFold = () => {
    setFold(!fold);
  }

jsx 部分：

js 复制代码

 <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>