react+antd实现列表互不影响的展开每条内容
需求:
列表可以分别展开自己的内容,互不影响,我选择了手搓……
每一条的展开or关闭状态,与内容展示,存为一个对象,最后合为一个数组,存放在状态里
1 | const [content, setContent] = useState([]); |
数据请求拿到数据以后处理一下数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const fetchRecord = async () => { setLoading( true ); const params = { id: urlQuery.id }; const result = await getOperateRec(params); if (result.code === 10000) { setData(result.data); const newText = result.data.map(item => ({ key: item.operateContent ? 1 : 0, value: '' })); setContent(newText); } else { message.error(result.msg); } setLoading( false ); }; useEffect(() => { fetchRecord(); }, []); |
// 0代表- 1代表+
dom代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <ul> {data && data.map((item, index) => ( <li key={item.id}> <div> <p style={{ marginBottom: '14px' , display: 'flex' }}> <span> {index + 1}、{moment(item.operateTime).format( 'YYYY-MM-DD HH:mm' )},由【 {item.operateEmployeeName}】操作【 {item.operateName}】 </span> {item.operateContent && ( <i className={ getPath(content, `${index}.key`) === 1 ? 'icon iconfont iconplus-square' : 'icon iconfont iconminus-square' } style={{ color: '#FF9E00' , cursor: 'pointer' , marginLeft: '4px' , fontSize: '16px' }} onClick={() => { keyChild( item.operateContent, getPath(content, `${index}.key`), index ); }} ></i> )} </p> {getPath(content, `${index}.value`)} </div> </li> ))} </ul> |
展开与收回的展示控制的方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const keyChild = (text, isOpen, index) => { setContent([ ...content.slice(0, index), { key: isOpen === 1 ? 0 : 1, value: isOpen === 1 ? ( <div dangerouslySetInnerHTML={{ __html: text }} style={{ marginLeft: '1.5em' , marginBottom: '20px' }} ></div> ) : ( '' ) }, ...content.slice(index + 1) ]); }; |
最终效果:
代码review时,姐妹提出了一个优化方案,就是把当前展开状态的index存起来为一个数组来控制状态,点击图标的时候,拿当前idnex遍历一下数组就好了,果然比我的方法简单还更优,有空优化一下代码,共勉
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)